Deploying NextJS Apps

Generally speaking when it comes to deploying your NextJS application to production, you have two options:

• Static HTML export: not all NextJS features are supported.
• Standard build API: supports all NextJS features (requires a NodeJs server).

Static HTML export

Allows you to export your NextJS app to static files (HTML, CSS, JavaScript, etc.), and does not require a NodeJs server to run.

Static export would be a good fit, if you're only using NextJS as a static site generator and you don't need any of the following features that require a server:

• Image Optimization with the default loader
• Internationalized Routing
• API Routes
• Rewrites
• Redirects
• Headers
• Middleware
• Incremental Static Regeneration
• fallback: true
• getServerSideProps

to do this you can update your build script to use next export

"scripts": {
  "build": "next build && next export"
}

Running npm run build will generate an out directory which is the static version of your app built by next export that you can deploy to any static host.

Supported Features

Static export still supports most of NextJS features required to build a static site, including:

• Dynamic routes using getStaticPaths
• Prefetching with next/link
• Preloading JavaScript
• Dynamic Imports
• Any styling options (e.g. CSS Modules, styled-jsx)
• Client-side data fetching
• getStaticProps
• getStaticPaths
• Image Optimization using a custom loader

Standard Build API

If you want to utilize all NextJS features and build a hybrid site where some of the pages are pre-rendered to static HTML, while others are rendered at request time or revalidated from time to time, you can use the standard NextJS build API which requires a server, for this you can either use:

• Managed server with Vercel
• Self-hosted server

Managed NextJS with Vercel

Vercel is the fastest way to deploy your NextJS application, and it requires no configuration. When deployed to Vercel, the platform automatically detects NextJS and runs next build to create an optimized build output, including:

• Assets are served from a Global Edge Network
• API routes are optimized as Serverless Functions
• Middlewares are turned into Edge Functions

In addition, Vercel provides features like:

• Performance monitoring unit NextJS Analytics
• Automatic SSL certificates
• Custom domains
• CI/CD (through GitHub, GitLab, etc.)
• Image optimization using next/image

Self-Hosted

You can self-host NextJS using any hosting provider that supports NodeJs or Docker containers.

NodeJs

NextJS can be deployed to any hosting provider that supports NodeJs.

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

Run next build to build your application, and next start to start the NodeJs server. This server supports all features of NextJS.

Docker

NextJS can be deployed to any hosting provider that supports Docker containers, orchestrated or running inside a single node. For more information check out the with-docker example repository.

Note on Image Optimization

If you are using next/image, consider adding sharp for more performant Image optimization in your production environment by running npm install sharp in your project directory. This is not necessary for Vercel deployments, as sharp is installed automatically.

Before Going to Production

Before deploying your NextJS application to production, there are some recommendations by Vercel team to ensure the best user experience.

Resources

Here are some of the resources that inspired this note:

Documentation

• Deployment from NextJS docs.
• Static HTML Export from NextJS docs.
• Going to Production from NextJS docs.