rsnext/docs/advanced-features/static-html-export.md

58 lines
2.7 KiB
Markdown

---
description: Export your Next.js app to static HTML, and run it standalone without the need of a Node.js server.
---
# Static HTML Export
<details>
<summary><b>Examples</b></summary>
<ul>
<li><a href="https://github.com/zeit/next.js/tree/canary/examples/with-static-export">Static Export</a></li>
</ul>
</details>
`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`](/docs/api-reference/next.config.js/exportPathMap.md) 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](/docs/advanced-features/automatic-static-optimization.md).
## How to use it
Develop your app as you normally do with Next.js. Then run:
```bash
next build && next export
```
For that you may want to update the scripts in your `package.json` like this:
```json
"scripts": {
"build": "next build && next export"
}
```
And run it at once with:
```bash
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](/docs/api-reference/next.config.js/exportPathMap.md).
## Deployment
You can read about deploying your Next.js application in the [deployment section](/docs/deployment.md).
## Caveats
- With `next export`, we build an HTML version of your app. At export time we will run the [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md) in your pages. The `req` and `res` fields of the [`context`](/docs/api-reference/data-fetching/getInitialProps.md#context-object) 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](/docs/basic-features/pages.md#static-generation) and [Server-Side Rendering](/docs/basic-features/pages.md#server-side-rendering) when you don't use `next export`. You can learn more about it in the [pages section](/docs/basic-features/pages.md).
- [API Routes](/docs/api-routes/introduction.md) are not supported by this method because they can't be prerendered to HTML.