此功能仅限于
next export,目前已被pages中的getStaticPaths或app中的generateStaticParams弃用。
exportPathMap 允许您指定请求路径到页面目标的映射,用于导出期间。在 exportPathMap 中定义的路径在使用 next dev 时也将可用。
让我们从一个示例开始,为具有以下页面的应用程序创建一个自定义的 exportPathMap:
pages/index.jspages/about.jspages/post.js打开 next.config.js 并添加以下 exportPathMap 配置:
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 函数,它接收 2 个参数:第一个参数是 defaultPathMap,它是 Next.js 使用的默认映射。第二个参数是一个对象,包含:
dev - 当在开发环境中调用 exportPathMap 时为 true。运行 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 - 预渲染时传递给 getInitialProps 的 query 对象。默认为 {}导出的
pathname也可以是文件名(例如,/readme.md),但如果其内容与.html不同,您可能需要设置Content-Type头为text/html。
可以配置 Next.js 将页面导出为 index.html 文件并要求尾随斜杠,/about 会变为 /about/index.html 并可通过 /about/ 路由访问。这是 Next.js 9 之前的默认行为。
要切换回并添加尾随斜杠,请打开 next.config.js 并启用 trailingSlash 配置:
module.exports = {
trailingSlash: true,
}next export 将使用 out 作为默认输出目录,您可以使用 -o 参数进行自定义,如下所示:
next export 将使用 out 作为默认输出目录,您可以使用 -o 参数进行自定义,如下所示:
next export -o outdir警告:使用
exportPathMap已弃用,并被pages内的getStaticPaths覆盖。我们不建议将它们一起使用。