exportPathMap
此功能是
next export
独有的,目前已被弃用,建议使用带有pages
的getStaticPaths
或带有app
的generateStaticParams
。
exportPathMap
允许你指定请求路径到页面目的地的映射,以便在导出期间使用。在 exportPathMap
中定义的路径在使用 next dev
时也可用。
让我们从一个示例开始,为具有以下页面的应用程序创建自定义 exportPathMap
pages/index.js
pages/about.js
pages/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 -o outdir
警告:使用
exportPathMap
已被弃用,并且会被pages
内部的getStaticPaths
覆盖。我们不建议一起使用它们。
这是否有帮助?