Deploying a Next.js application on Vercel

How do we deploy a Next.js app to a real web server, so other people can access it?

One of the most simple ways to deploy a Next application is through Vercel, the platform from the same company that created Next.js. You can use Vercel to deploy Node.js apps, Static Websites, and much more.

(Older posts and screenshots still say Zeit or Now. Same product. The CLI package is now vercel, not now.)

Vercel makes the deployment and distribution step of an app very, very simple and fast, and in addition to Node.js apps, they also support deploying Go, Python and other languages.

You can think of it as the “cloud”, as you don’t really know where your app will be deployed, but you know that you will have a URL where you can reach it.

Vercel is free to start using, with a generous free plan. Check the pricing page if you need more.

Installation

The best way to start using Vercel from the terminal is the official CLI. On npm that package is vercel (59.16.0 as of this update):

npm install -g vercel

Once the command is available, run

vercel login

and the app will ask you for your email.

If you haven’t registered already, create an account on https://vercel.com/signup before continuing, then add your email to the CLI client.

Once this is done, from the Next.js project root folder run

vercel

and the app will be instantly deployed to Vercel, and you’ll be given the unique app URL:

Once you run vercel, the app is deployed to a random URL under the vercel.app domain. Older screenshots still show now.sh. Same idea, new domain.

We can see 3 different URLs in the output given in the image:

• https://firstproject-2pv7khwwr.now.sh
• https://firstproject-sepia-ten.now.sh
• https://firstproject.flaviocopes.now.sh

Why so many?

The first is the URL identifying the deploy. Every time we deploy the app, this URL will change.

You can test immediately by changing something in the project code, and running vercel again:

The other 2 URLs will not change. The first is a random one, the second is your project name (which defaults to the current project folder, your account name and then the platform domain).

If you visit the URL, you will see the app deployed to production.

You can configure Vercel to serve the site to your own custom domain or subdomain, but I will not dive into that right now.

For a wider look at production deploys, see Deploying a Next.js application to production.

The generated subdomain is enough for our testing purposes.

Want me to talk about your product? You can sponsor this site.