Deploying a NextJS app

next build builds the production application in the .next folder. After building, next start starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.

According to the makers of Next.js, the easiest way to deploy Next.js to production is to use the Vercel platform developed by the creators of Next.js. Vercel is an all-in-one platform with Global CDN supporting static & JAMstack deployment and Serverless Functions.

Once you’re signed up, import your application from your Code Repo on Vercel. When it’s done, you’ll get deployment URLs. Click on one of the URLs and you should see the Next.js starter page live.

When you deploy your Next.js app to Vercel, the following happens by default:

Vercel has many more features, such as Custom Domains, Environment Variables and Automatic HTTPS that auto-renew themselves.

Develop, Preview, Ship

We’ve just gone through the workflow we call DPS: Develop, Preview, and Ship.

  • Develop: We’ve written code in Next.js and used the Next.js development server running to take advantage of its hot reloading feature.
  • Preview: We’ve pushed changes to a branch on GitHub, and Vercel created a preview deployment that’s available via a URL. We can share this preview URL with others for feedback. In addition to doing code reviews, you can do deployment previews.
  • Ship: We’ve merged the pull request to main to ship to production.

We strongly recommend using this workflow when developing Next.js apps — it will help you iterate on your app faster.

Exporting and deploying application as static files

You can export your app by generating static files with next build && next export to an out directory. Use -o to specify a custom out directory. The upload those static files on a webserver.

To only export specific pages:

// next.config.js
module.exports = {
    exportPathMap: async function (
        defaultPathMap,
        { dev, dir, outDir, distDir, buildId }
    ) {
        return {
            '/': { page: '/' },
            '/about': { page: '/about' }, // /pages/about.js
            '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } }, // /pages/post.js
            '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
            '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
        }
    },
}

Keep in mind that next/image does not work with static file exporting. You will get an error like this:

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.

Explanation can be read here.

About Author

Mathias Bothe To my job profile

I am Mathias, born 39 years ago in Heidelberg, Germany. Today I am living in Munich and Stockholm. I am a passionate IT freelancer with more than 15 years experience in programming, especially in developing web based applications for companies that range from small startups to the big players out there. I am founder of bosy.com, creator of the security service platform BosyProtect© and initiator of several other software projects.