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:

• Pages that use Static Generation and assets (JS, CSS, images, fonts, etc) will automatically be served from the Vercel Edge Network, which is blazingly fast.
• Pages that use Server-Side Rendering and API routes will automatically become isolated Serverless Functions. This allows page rendering and API requests to scale infinitely.

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.