Skip to main content

exportPathMap

此功能是 next export 独有的，目前已弃用，取而代之的是 getStaticPaths 与 pages 或 generateStaticParams 与 app。

¥This feature is exclusive to next export and currently deprecated in favor of getStaticPaths with pages or generateStaticParams with app.

exportPathMap 允许你指定请求路径到页面目标的映射，以在导出期间使用。使用 next dev 时，exportPathMap 中定义的路径也可用。

¥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.

让我们从一个示例开始，为具有以下页面的应用创建自定义 exportPathMap：

¥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

打开 next.config.js 并添加以下 exportPathMap 配置：

¥Open next.config.js and add the following exportPathMap config:

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' } },
    }
  },
}

很高兴知道：exportPathMap 中的 query 字段不能与 自动静态优化页面 或 getStaticProps 页面 一起使用，因为它们在构建时渲染为 HTML 文件，并且在 next export 期间无法提供附加查询信息。

¥Good to know: the query field in exportPathMap cannot be used with automatically statically optimized pages or getStaticProps pages as they are rendered to HTML files at build-time and additional query information cannot be provided during next export.

然后页面将导出为 HTML 文件，例如 /about 将变成 /about.html。

¥The pages will then be exported as HTML files, for example, /about will become /about.html.

exportPathMap 是一个 async 函数，它接收 2 个参数：第一个是 defaultPathMap，它是 Next.js 使用的默认地图。第二个参数是一个对象：

¥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 当 exportPathMap 在开发中被调用时。运行 next export 时为 false。在开发中 exportPathMap 用于定义路由。

    ¥dev - true when exportPathMap is being called in development. false when running next export. In development exportPathMap is used to define routes.

  • dir - 项目目录的绝对路径

    ¥dir - Absolute path to the project directory

  • outDir - out/ 目录 (可通过 -o 配置) 的绝对路径。当 dev 为 true 时，outDir 的值为 null。

    ¥outDir - Absolute path to the out/ directory (configurable with -o). When dev is true the value of outDir will be null.

  • distDir - .next/ 目录的绝对路径（可使用 distDir 配置进行配置）

    ¥distDir - Absolute path to the .next/ directory (configurable with the distDir config)

  • buildId - 生成的构建 ID

    ¥buildId - The generated build id

返回的对象是页面映射，其中 key 是 pathname，value 是接受以下字段的对象：

¥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 - 要渲染的 pages 目录内的页面

    ¥page: String - the page inside the pages directory to render

  • query：Object - 预渲染时传递给 getInitialProps 的 query 对象。默认为 {}

    ¥query: Object - the query object passed to getInitialProps when prerendering. Defaults to {}

导出的 pathname 也可以是文件名（例如 /readme.md），但如果 Content-Type 标头与 .html 不同，则在提供其内容时可能需要将 Content-Type 标头设置为 text/html。

¥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

可以配置 Next.js 将页面导出为 index.html 文件并需要尾部斜杠，/about 变为 /about/index.html 并且可通过 /about/ 路由。这是 Next.js 9 之前的默认行为。

¥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.

要切换回来并添加尾部斜杠，请打开 next.config.js 并启用 trailingSlash 配置：

¥To switch back and add a trailing slash, open next.config.js and enable the trailingSlash config:

module.exports = {
  trailingSlash: true,
}

自定义输出目录​

¥Customizing the output directory

next export 将使用 out 作为默认输出目录，你可以使用 -o 参数自定义它，如下所示：

¥next export will use out as the default output directory, you can customize this using the -o argument, like so:

next export -o outdir

警告：使用 exportPathMap 已被弃用，并被 pages 内的 getStaticPaths 覆盖。我们不建议将它们一起使用。

¥Warning: Using exportPathMap is deprecated and is overridden by getStaticPaths inside pages. We don't recommend using them together.