static-html-export.md

description
Export your Next.js app to static HTML, and run it standalone without the need of a Node.js server.

Static HTML Export

Examples

• Static Export

next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.

The exported app supports almost every feature of Next.js, including dynamic routes, prefetching, preloading and dynamic imports.

The way next export works is by prerendering all pages to HTML; it does so based on a mapping called exportPathMap which offers a way to pre-define paths you will render as html.

If your pages don't have getInitialProps you may not need next export at all; next build is already enough thanks to Automatic Static Optimization.

How to use it

Simply develop your app as you normally do with Next.js. Then run:

next build && next export

For that you may want to update the scripts in your package.json like this:

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

And run it at once with:

npm run build

Then you'll have a static version of your app in the out directory.

By default next export doesn't require any configuration. It will generate a default exportPathMap with routes for the pages inside the pages directory.

To learn more about exportPathMap please visit the documentation for the exportPathMap API.

Caveats

• With next export, we build an HTML version of your app. At export time we will run the getInitialProps in your pages. The req and res fields of the context object will be empty objects during export as there is no server running.
• You won't be able to render HTML dynamically when static exporting, as we pre-build the HTML files. Your application can be a hybrid of Static Generation and Server-Side Rendering when you don't use next export. You can learn more about it in the pages section.
• API Routes are not supported by this method because they can't be prerendered to HTML.