Deployment with Next.js
Tags: javascript, react, tutorial, github
Published: 2023-01-30 15:17:56

As I said in the last post [Trying Next.js](https://dev.to/celest67/trying-nextjs-4ee4), 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](https://vercel.com/):

> 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.

![next build](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfne9og2mzja4ct6v94b.png)

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](https://github.com/) if we want to deploy to Vercel

![Github account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94bea1hx6fml1ev1uzau.png)

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

![new repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ippgqln0qdcj5jmk0zn9.png)

Next, I'm going to initialize my repo 

![git init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55kfqo9co8w2e975gi73.png)

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

![first commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6619afk2lpg3k6s73ywh.png)

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)

![vercel import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj6cngppy7o73anxrhy6.png)

> 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

![config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3a2oxizr23u2j8l2lolh.png)

Then I can see a screen with some feedback of the process

![process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yexopazogb1r8snboe1.png)

And in less than a minute I get a success message

![Congratulations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5w686jy7whw31vety2y.png)

If I go to the dashboard I can see where my app is https://nextjs-try1.vercel.app/

![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq2ihu79hkm209i2wc1t.png)

Well I think that is for today, seems to me like indeed it was easy, what do you think? what do you want to see next?

Cheers!