introduction

这个特性是next export独有的,查看静态HTML 导出 了解更多 ..

exportPathMap允许你指定一个请求路径的映射到页面目的地 …. 能够在导出的时候使用,在exportPathMap定义的路径在next dev的时候也是可用的 …

让我们从一个示例开始,去创建自定义的exportPathMap(对于一个包含了以下目录的app)

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

打开next.config.js去增加以下的exportPathMap配置

  1. module.exports = {
  2.   exportPathMap: async function (
  3.     defaultPathMap,
  4.     { dev, dir, outDir, distDir, buildId }
  5.   ) {
  6.     return {
  7.       '/': { page: '/' },
  8.       '/about': { page: '/about' },
  9.       '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
  10.       '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
  11.       '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } },
  12.     }
  13.   },
  14. }

注意: exportPathMap中的query字段不能够与自动静态优化页面或者使用了getStaticProps的页面进行使用 - 因为它们将在构建时渲染为HTML 页面并且在next export阶段额外的查询信息也不能够提供 …

这些页面将会暴露成一个HTML 文件,例如/about将变成/about.html

exportPathMap是一个异步函数能接收两个参数,第一个参数是defaultPathMap,这是一个由Next.js 使用的默认map ..

第二个参数是一个对象

  • dev- true 当exportPathMap将在开发下被调用 ..

false当运行next export的情况下为false,在开发环境下exportPathMap被用来定义路由 ..

  • dir到项目目录的绝对目录
  • outDir到out/目录的绝对路径(使用-o进行配置),当dev是true,那么这个outDir的值将是null ..
  • distDir表示到.next/目录的绝对路径(通过distDir是可配置的) ..
  • buildId生成的构建id

这个返回的对象是一个页面的映射(这里的key是pathname并且value是一个接收以下字段的对象

  • page: String``pages目录中的可以渲染的页面
  • query: Object这个query对象将会传递给getInitialProps(当预渲染的时候),默认为{}

这里暴露的pathname能够是文件名(例如/readme.md),但是你需要设置Content-Typeheader为text/html(当它提供的内容不同于.html)

增加尾缀斜杠

最好配置Next.js 暴露页面作为 index.html文件并确保必要的尾斜杠,这样/about将变成/about/index.html并且可以通过/about/进行路由,这在Next 9 之前是默认行为 ..

为了在尾斜杠之间进行切换,可以配置trailingSlash配置

  1. module.exports = {
  2.   trailingSlash: true,
  3. }

自定义输出目录

next export将使用out作为默认的输出目录,你能够自定义(通过 -o参数),例如

  1. next export -o outdir

敬告:

使用exportPathMap对于使用了getStaticPaths支持的页面路由现在将被忽略并且能够被覆盖,我们推荐不要结合使用它们 …