DEV Community

Paula Marín S
Paula Marín S

Posted on

Deployment with Next.js

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.

next build

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

Github account

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

Next, I'm going to initialize my repo

git init

Now it is time to push my project to my github

git remote add origin

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

first commit

Since we are deploying to Vercel, make sure to have an account here

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

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


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


And in less than a minute I get a success message


If I go to the dashboard I can see where my app is


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?


Oldest comments (0)