Deployment with Next.js

#javascript #react #tutorial #github

As I said in the last post Trying Next.js, one of the things that really intrigues me is the deployment of this apps that I can get running so fast. In the site it says

The easiest way to deploy Next.js to production is to use the Vercel platform developed by the creators of Next.js.

For those who haven't heard of Vercel:

Vercel is a serverless platform for static and hybrid applications built to integrate with your headless content, commerce, or database. We make it easy for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default. You can start using it for free — no credit card required.

And that sounds great in my head, build a small app with something that I want to show and I don't even have to show it running on my machine I can also show it in a public URL that I can just share and it is supposed to be easy.

First I want to build my app and check that everything looks OK.

According to the documentation now I'm going to get a .next folder with this content

.next/static/chunks/pages – Js files with corresponding pages
.next/static/media – Statically imported images from next/image
.next/static/css – Global CSS files for all pages
.next/server/pages – The HTML and JavaScript entry points pre-rendered from the server.
.next/server/chunks – Shared JavaScript chunks used in multiple places throughout the application
.next/cache – Output for the build cache and cached images, responses, and pages from the Next.js server.

Looks like we have to have a GitHub account if we want to deploy to Vercel

So, I'm going to go to my GitHub and create a repository called nextjs-try1 (same as my project) and I am not going to initialize it

Next, I'm going to initialize my repo

Now it is time to push my project to my github

git remote add origin https://github.com/celest67/nextjs-try1.git

I'm going to do an initial commit with everything in my project and push it

Since we are deploying to Vercel, make sure to have an account here https://vercel.com/signup

Once inside Vercel it looks like we just have to import the correct repository by pressing the button import. (I had to install Vercel for GitHub and give it access)

When deploying to Vercel, the platform automatically detects Next.js, runs next build, and optimizes the build output for you, including:

Persisting cached assets across deployments if unchanged

Immutable deployments with a unique URL for every commit

Pages are automatically statically optimized, if possible

Assets (JavaScript, CSS, images, fonts) are compressed and served from a Global Edge Network

API Routes are automatically optimized as isolated Serverless Functions that can scale infinitely

Middleware are automatically optimized as Edge Functions that have zero cold starts and boot instantly

Then it gives me some configuration options which I'm not going to change and click Deploy