主题
exportPathMap
此功能是
next export独有的,目前已弃用,取而代之的是getStaticPaths与pages或generateStaticParams与app。¥This feature is exclusive to
next exportand currently deprecated in favor ofgetStaticPathswithpagesorgenerateStaticParamswithapp.
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.jspages/about.jspages/post.js
打开 next.config.js 并添加以下 exportPathMap 配置:
¥Open next.config.js and add the following exportPathMap config:
需要了解:
exportPathMap中的query字段不能与 自动静态优化页面 或getStaticProps页面 一起使用,因为它们在构建时渲染为 HTML 文件,并且在next export期间无法提供附加查询信息。¥Good to know: the
queryfield inexportPathMapcannot be used with automatically statically optimized pages orgetStaticPropspages as they are rendered to HTML files at build-time and additional query information cannot be provided duringnext 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-truewhenexportPathMapis being called in development.falsewhen runningnext export. In developmentexportPathMapis used to define routes.dir- 项目目录的绝对路径¥
dir- Absolute path to the project directoryoutDir-out/目录 (可通过-o配置) 的绝对路径。当dev为true时,outDir的值为null。¥
outDir- Absolute path to theout/directory (configurable with-o). Whendevistruethe value ofoutDirwill benull.distDir-.next/目录的绝对路径(可使用distDir配置进行配置)¥
distDir- Absolute path to the.next/directory (configurable with thedistDirconfig)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 thepagesdirectory to renderquery:Object- 预渲染时传递给getInitialProps的query对象。默认为{}¥
query:Object- thequeryobject passed togetInitialPropswhen prerendering. Defaults to{}
导出的
pathname也可以是文件名(例如/readme.md),但如果Content-Type标头与.html不同,则在提供其内容时可能需要将Content-Type标头设置为text/html。¥The exported
pathnamecan also be a filename (for example,/readme.md), but you may need to set theContent-Typeheader totext/htmlwhen 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:
自定义输出目录
¥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:
bash
next export -o outdir警告:使用
exportPathMap已被弃用,并被pages内的getStaticPaths覆盖。我们不建议将它们一起使用。¥Warning: Using
exportPathMapis deprecated and is overridden bygetStaticPathsinsidepages. We don't recommend using them together.