mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
### What? - Added separate links for the app and pages router in the shared documentation. - Added comment at the top of all shared documentation. - Fixed typos in pages documentation comment. ### Why? - To limit the switching between the different routers in shared documentation when clicking the links.
95 lines
4.4 KiB
Plaintext
95 lines
4.4 KiB
Plaintext
---
|
|
title: exportPathMap (Deprecated)
|
|
nav_title: exportPathMap
|
|
description: Customize the pages that will be exported as HTML files when using `next export`.
|
|
---
|
|
|
|
{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
|
|
|
|
> This feature is exclusive to `next export` and currently **deprecated** in favor of `getStaticPaths` with `pages` or `generateStaticParams` with `app`.
|
|
|
|
<details>
|
|
<summary>Examples</summary>
|
|
|
|
- [Static Export](https://github.com/vercel/next.js/tree/canary/examples/with-static-export)
|
|
|
|
</details>
|
|
|
|
`exportPathMap` allows you to specify a mapping of request paths to page destinations, to be used during export. Paths defined in `exportPathMap` will also be available when using [`next dev`](/docs/app/api-reference/next-cli#development).
|
|
|
|
Let's start with an example, to create a custom `exportPathMap` for an app with the following pages:
|
|
|
|
- `pages/index.js`
|
|
- `pages/about.js`
|
|
- `pages/post.js`
|
|
|
|
Open `next.config.js` and add the following `exportPathMap` config:
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
exportPathMap: async function (
|
|
defaultPathMap,
|
|
{ dev, dir, outDir, distDir, buildId }
|
|
) {
|
|
return {
|
|
'/': { page: '/' },
|
|
'/about': { page: '/about' },
|
|
'/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
|
|
'/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
|
|
'/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
|
|
}
|
|
},
|
|
}
|
|
```
|
|
|
|
> **Good to know**: the `query` field in `exportPathMap` cannot be used with [automatically statically optimized pages](/docs/pages/building-your-application/rendering/automatic-static-optimization) or [`getStaticProps` pages](/docs/pages/building-your-application/data-fetching/get-static-props) as they are rendered to HTML files at build-time and additional query information cannot be provided during `next export`.
|
|
|
|
The pages will then be exported as HTML files, for example, `/about` will become `/about.html`.
|
|
|
|
`exportPathMap` is an `async` function that receives 2 arguments: the first one is `defaultPathMap`, which is the default map used by Next.js. The second argument is an object with:
|
|
|
|
- `dev` - `true` when `exportPathMap` is being called in development. `false` when running `next export`. In development `exportPathMap` is used to define routes.
|
|
- `dir` - Absolute path to the project directory
|
|
- `outDir` - Absolute path to the `out/` directory ([configurable with `-o`](#customizing-the-output-directory)). When `dev` is `true` the value of `outDir` will be `null`.
|
|
- `distDir` - Absolute path to the `.next/` directory (configurable with the [`distDir`](/docs/pages/api-reference/next-config-js/distDir) config)
|
|
- `buildId` - The generated build id
|
|
|
|
The returned object is a map of pages where the `key` is the `pathname` and the `value` is an object that accepts the following fields:
|
|
|
|
- `page`: `String` - the page inside the `pages` directory to render
|
|
- `query`: `Object` - the `query` object passed to `getInitialProps` when prerendering. Defaults to `{}`
|
|
|
|
> The exported `pathname` can also be a filename (for example, `/readme.md`), but you may need to set the `Content-Type` header to `text/html` when serving its content if it is different than `.html`.
|
|
|
|
## Adding a trailing slash
|
|
|
|
It is possible to configure Next.js to export pages as `index.html` files and require trailing slashes, `/about` becomes `/about/index.html` and is routable via `/about/`. This was the default behavior prior to Next.js 9.
|
|
|
|
To switch back and add a trailing slash, open `next.config.js` and enable the `trailingSlash` config:
|
|
|
|
```js filename="next.config.js"
|
|
module.exports = {
|
|
trailingSlash: true,
|
|
}
|
|
```
|
|
|
|
## Customizing the output directory
|
|
|
|
<AppOnly>
|
|
|
|
[`next export`](/docs/app/building-your-application/deploying/static-exports) will use `out` as the default output directory, you can customize this using the `-o` argument, like so:
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
[`next export`](/docs/pages/building-your-application/deploying/static-exports) will use `out` as the default output directory, you can customize this using the `-o` argument, like so:
|
|
|
|
</PagesOnly>
|
|
|
|
```bash filename="Terminal"
|
|
next export -o outdir
|
|
```
|
|
|
|
> **Warning**: Using `exportPathMap` is deprecated and is overridden by `getStaticPaths` inside `pages`. We don't recommend using them together.
|