Menu

exportPathMap(已弃用)

此功能专属于 next export,目前已弃用,建议使用 pages 中的 getStaticPathsapp 中的 generateStaticParams

示例

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

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

  • pages/index.js
  • pages/about.js
  • pages/post.js

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

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" } },
    };
  },
};

值得注意的是exportPathMap 中的 query 字段不能与自动静态优化的页面getStaticProps 页面一起使用,因为它们在构建时渲染为 HTML 文件,并且无法在 next export 期间提供额外的查询信息。

这些页面随后将被导出为 HTML 文件,例如,/about 将变为 /about.html

exportPathMap 是一个 async 函数,接收两个参数:第一个是 defaultPathMap,这是 Next.js 使用的默认映射。第二个参数是一个对象,包含:

  • dev - 当 exportPathMap 在开发中被调用时为 true。运行 next export 时为 false。在开发中,exportPathMap 用于定义路由。
  • dir - 项目目录的绝对路径
  • outDir - out/ 目录的绝对路径(可通过 -o 配置)。当 devtrue 时,outDir 的值为 null
  • distDir - .next/ 目录的绝对路径(可通过 distDir 配置)
  • buildId - 生成的构建 ID

返回的对象是页面的映射,其中 keypathnamevalue 是一个对象,接受以下字段:

  • pageString - pages 目录内的页面
  • queryObject - 预渲染时传递给 getInitialProps 的查询对象。默认为 {}

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

添加尾部斜杠

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

要切换回并添加尾部斜杠,打开 next.config.js 并启用 trailingSlash 配置:

next.config.js
module.exports = {
  trailingSlash: true,
};

自定义输出目录

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

终端
next export -o outdir

警告:使用 exportPathMap 已弃用,并被 pages 内的 getStaticPaths 覆盖。我们不建议同时使用它们。