Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update next export documentation. #31465

Merged
merged 7 commits into from
Nov 30, 2021
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 35 additions & 38 deletions docs/advanced-features/static-html-export.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,65 +11,62 @@ description: Export your Next.js app to static HTML, and run it standalone witho
</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.
`next export` allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server. We only recommend using `next export` if you don't need any of the [unsupported features](#unsupported-features) requiring a server.
timneutkens marked this conversation as resolved.
Show resolved Hide resolved

The exported app supports almost every feature of Next.js, including dynamic routes, prefetching, preloading and dynamic imports.
If you're looking to build a hybrid site where only _some_ pages are prerendered to static HTML, Next.js already does that automatically. Learn more about [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) and [Incremental Static Regeneration](/docs/basic-features/data-fetching.md#incremental-static-regeneration).

`next export` works by prerendering all pages to HTML. For [dynamic routes](/docs/routing/dynamic-routes.md), your page can export a [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation) function to let the exporter know which HTML pages to generate for that route.
## Usage
leerob marked this conversation as resolved.
Show resolved Hide resolved
leerob marked this conversation as resolved.
Show resolved Hide resolved

> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side)).
>
> If you're looking to make a hybrid site where only _some_ pages are prerendered to static HTML, Next.js already does that automatically for you! Read up on [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) for details.
>
> `next export` also causes features like [Incremental Static Generation](/docs/basic-features/data-fetching.md#fallback-true) and [Regeneration](/docs/basic-features/data-fetching.md#incremental-static-regeneration) to be disabled, as they require [`next start`](/docs/api-reference/cli.md#production) or a serverless deployment to function.

## 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:
Update your build script in `package.json` to use `next export`:

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

And run it with:
Running `npm run build` will generate an `out` directory.

```bash
npm run build
```
With `next export`, we build an HTML version of your app. At export time, we call [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) for each page that exports it, and pass the result to the page's component. `next export` will generate an HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/routing/dynamic-routes.md), where it will call [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation) and generate pages based on the result).
leerob marked this conversation as resolved.
Show resolved Hide resolved
leerob marked this conversation as resolved.
Show resolved Hide resolved

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 output a static HTML file for each page in your `pages` directory (or more for [dynamic routes](/docs/routing/dynamic-routes.md), where it will call [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation) and generate pages based on the result).
For more advanced scenarios, you can define a parameter called [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md) in your [`next.config.js`](/docs/api-reference/next.config.js/introduction.md) file to configure exactly which pages will be generated.

## Deployment
## Supported Features

The majority of core Next.js features needed to build a static site are supported, including:

- [Dynamic Routes](/docs/routing/dynamic-routes.md)
leerob marked this conversation as resolved.
Show resolved Hide resolved
leerob marked this conversation as resolved.
Show resolved Hide resolved
- Prefetching with `next/link`
- Preloading JavaScript
- [Dynamic Imports](/docs/advanced-features/dynamic-import.md)
- Any styling options (e.g. CSS Modules, styled-jsx)
- [Client-side data fetching](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side)
- [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation)
- [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation)
- [Image Optimization](/docs/basic-features/image-optimization.md) using a [custom loader](/docs/basic-features/image-optimization.md#loader)

By default, `next export` will generate an `out` directory, which can be served by any static hosting service or CDN.
## Unsupported Features

> We strongly recommend using [Vercel](https://vercel.com/) even if your Next.js app is fully static. [Vercel](https://vercel.com/) is optimized to make static Next.js apps blazingly fast. `next export` works with Zero Config deployments on Vercel.
Features that require a Node.js server, or dynamic logic that cannot be computed during the build process, are not supported:

## Caveats
- [Image Optimization](/docs/basic-features/image-optimization.md) (default loader)
- [Internationalized Routing](/docs/advanced-features/i18n-routing.md)
- [API Routes](/docs/api-routes/introduction.md)
- [Rewrites](/docs/api-reference/next.config.js/rewrites.md)
- [Redirects](/docs/api-reference/next.config.js/redirects.md)
- [Headers](/docs/api-reference/next.config.js/headers.md)
- [Middleware](/docs/middleware.md)
- [Incremental Static Regeneration](/docs/basic-features/data-fetching.md#incremental-static-regeneration)
- [`fallback: true`](/docs/basic-features/data-fetching.md#fallback-true)
- [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering)

- With `next export`, we build an HTML version of your app. At export time, we call [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) for each page that exports it, and pass the result to the page's component. It's also possible to use the older [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md) API instead of `getStaticProps`, but it comes with a few caveats:
### `getInitialProps`

It's possible to use [`getInitialProps`](/docs/api-reference/data-fetching/getInitialProps.md) API instead of `getStaticProps`, but it comes with a few caveats:
timneutkens marked this conversation as resolved.
Show resolved Hide resolved
leerob marked this conversation as resolved.
Show resolved Hide resolved

- `getInitialProps` cannot be used alongside `getStaticProps` or `getStaticPaths` on any given page. If you have dynamic routes, instead of using `getStaticPaths` you'll need to configure the [`exportPathMap`](/docs/api-reference/next.config.js/exportPathMap.md) parameter in your [`next.config.js`](/docs/api-reference/next.config.js/introduction.md) file to let the exporter know which HTML files it should output.
- When `getInitialProps` is called during export, the `req` and `res` fields of its [`context`](/docs/api-reference/data-fetching/getInitialProps.md#context-object) parameter will be empty objects, since during export there is no server running.
- `getInitialProps` **will be called on every client-side navigation**, if you'd like to only fetch data at build-time, switch to `getStaticProps`.
- `getInitialProps` should fetch from an API and cannot use Node.js-specific libraries or the file system like `getStaticProps` can.

It's recommended to use and migrate towards `getStaticProps` over `getInitialProps` whenever possible.

- The [`fallback: true`](/docs/basic-features/data-fetching.md#fallback-true) mode of `getStaticPaths` is not supported when using `next export`.
- [API Routes](/docs/api-routes/introduction.md) are not supported by this method because they can't be prerendered to HTML.
- [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) cannot be used within pages because the method requires a server. Consider using [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) instead.
- [Internationalized Routing](/docs/advanced-features/i18n-routing.md) is not supported as it requires Next.js' server-side routing.
- The [`next/image`](/docs/api-reference/next/image.md) component's default loader is not supported when using `next export`. However, other [loader](/docs/basic-features/image-optimization.md#loader) options will work.
We recommended to migrate towards `getStaticProps` over `getInitialProps` whenever possible.
timneutkens marked this conversation as resolved.
Show resolved Hide resolved
leerob marked this conversation as resolved.
Show resolved Hide resolved