导出静态页面

Examples

next export可以输出一个 Next.js 应用作为静态资源应用而不依靠 Node.js 服务。这个输出的应用几乎支持 Next.js 的所有功能，包括动态路由，预获取，预加载以及动态导入。

next export将把所有有可能渲染出的 HTML 都生成。这是基于映射对象的pathname关键字关联到页面对象。这个映射叫做exportPathMap。

页面对象有2个属性:

  • page - 字符串类型，页面生成目录
  • query - 对象类型，当预渲染时，query对象将会传入页面的生命周期getInitialProps中。默认为{}。

使用

通常开发 Next.js 应用你将会运行：

  1. next build
  2. next export

next export命令默认不需要任何配置，将会自动生成默认exportPathMap生成pages目录下的路由你页面。

如果你想动态配置路由，可以在next.config.js中添加异步函数exportPathMap。

  1. // next.config.js
  2. module.exports = {
  3.   exportPathMap: async function (defaultPathMap) {
  4.     return {
  5.       '/': { page: '/' },
  6.       '/about': { page: '/about' },
  7.       '/readme.md': { page: '/readme' },
  8.       '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
  9.       '/p/learn-nextjs': { page: '/post', query: { title: 'learn-nextjs' } },
  10.       '/p/deploy-nextjs': { page: '/post', query: { title: 'deploy-nextjs' } }
  11.     }
  12.   }
  13. }
注意：如果 path 的结尾是目录名，则将导出/dir-name/index.html，但是如果结尾有扩展名，将会导出对应的文件，如上/readme.md。如果你使用.html以外的扩展名解析文件时，你需要设置 header 的Content-Type头为"text/html".

输入下面命令：

  1. next build
  2. next export

你可以在package.json添加一个 NPM 脚本，如下所示：

  1. {
  2.   "scripts": {
  3.     "build": "next build",
  4.     "export": "npm run build && next export"
  5.   }
  6. }

接着只用执行一次下面命令：

  1. npm run export

然后你将会有一个静态页面应用在out 目录下。

你也可以自定义输出目录。可以运行next export -h命令查看帮助。

现在你可以部署out目录到任意静态资源服务器上。注意如果部署 GitHub Pages 需要加个额外的步骤，文档如下

例如，访问out目录并用下面命令部署应用ZEIT Now.

  1. now

限制

使用next export，我们创建了个静态 HTML 应用。构建时将会运行页面里生命周期getInitialProps 函数。

req和res只在服务端可用，不能通过getInitialProps。

所以你不能预构建 HTML 文件时动态渲染 HTML 页面。如果你想动态渲染可以运行next start或其他自定义服务端 API。