Next.js Deployment

This guide will show you how to use the Next.js Build API to deploy managed or self-hosted applications.

Next.js Build API

The next build creates a production-ready version of your application. The following items are included in the standard output:

• HTML files for pages using getStaticProps or Automatic Static Optimization
• CSS files for global styles or for individually scoped styles
• JavaScript for pre-rendering dynamic content from the Next.js server
• JavaScript for interactivity on the client-side through React

The following output is produced in the.next folder:

• .next/static/chunks/pages – Each JavaScript file in this folder corresponds to the same-named route. When accessing the /about the route in your application, for example, the JavaScript file loaded is.next/static/chunks/pages/about.js.
• .next/static/media – Statically imported images from next/image are hashed and copied here
• .next/static/css – Global CSS files for all pages in your application
• .next/server/pages – The HTML and JavaScript entry points prerendered from the server. The .nft.json files are created when Output File Tracing is enabled and contain all the file paths that depend on a given page.
• .next/server/chunks – Shared JavaScript chunks used in multiple places throughout your application
• .next/cache – Output for the build cache and cached images, responses, and pages from the Next.js server. Using a cache helps decrease build times and improve the performance of loading images

To help achieve the optimal speed and support all modern browsers, all JavaScript code inside.next has been compiled and browser bundles have been minified.

Managed Next.JS with Vercel

Vercel is a frontend cloud platform developed by the Next.js team. It's the quickest and easiest method to deploy your managed Next.js application with no setup required.

When you deploy to Vercel, the platform recognizes Next.js automatically, performs next build, and optimizes the build output for you, including:

• If cached assets are not altered, they will persist across deployments.
• Deployments that are immutable and have a unique URL for each commit
• If feasible, pages are statically optimized automatically.
• A Global Edge Network API compresses and serves assets (JavaScript, CSS, pictures, and fonts). As independent routes, they are automatically optimised. Functions that don't require a server and can scale indefinitely
• Edge Functions that have zero cold starts and boot instantly are automatically optimised as middleware.

In addition, Vercel provides features like:

• Automatic performance monitoring with Next.js Analytics
• Automatic HTTPS and SSL certificates
• Automatic CI/CD (through GitHub, GitLab, Bitbucket, etc.)
• Support for Environment Variables
• Support for Custom Domains
• Support for Image Optimization with next/image
• Instant global deployments via git push

Self-hosting

You can use Node.js or Docker to self-host Next.js and get support for all features. There is also a Static HTML Export option, which has some limitations.

Node.js Server

Any hosting service that supports Node.js can be used to run Next.js. AWS EC2 or a DigitalOcean Droplet, for example.

To begin, double-check your package.

The "build" and "start" scripts are in json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Then, to build your application, run next build. Finally, start the Node.js server by running next start. This server supports all of Next.js' capabilities.

If you're using next/image, try installing sharp in your production environment for faster Image Optimization by executing npm install sharp in your project directory. Sharp may require further settings on Linux machines to prevent excessive memory utilisation.

Docker Image

Any hosting provider that supports Docker containers can run Next.js. When deploying to container orchestrators like Kubernetes or HashiCorp Nomad, or when running on a single node in any cloud provider, this strategy can be used.

1. Install Docker on your machine
2. Clone the with-docker example
3. Build your container: docker build -t nextjs-docker .
4. Run your container: docker run -p 3000:3000 nextjs-docker

Static HTML Export

If you’d like to do a static HTML export of your Next.js app, follow the directions on our Static HTML Export documentation.

Automatic Updates

You want to see the most recent version of your Next.js application without having to reload it when you deploy it.

When routing, Next.js will load the most recent version of your application in the background. Next/link will momentarily operate as a typical <a> tag for client-side navigation.

Next.js will use the old version if a new page (with an old version) has previously been prefetched by next/link. When you go to a page that hasn't been prefetched (and isn't cached at the CDN level), you'll get the most recent version.