Next.js高级特性：静态HTML导出

next export 允许您将应用程序导出为静态HTML，该HTML可独立运行而无需Node.js服务器。

导出的应用程序几乎支持Next.js的所有功能，包括动态路由，预取，预加载和动态导入。

next export通过将所有页面预呈现为HTML来工作。对于动态路由，您的页面可以导出一个getStaticPaths函数，以使导出器知道为该路由生成哪些HTML页面。

next export适用于您的页面均不具有服务器端或增量数据要求的场景（尽管静态渲染的页面仍可以在客户端获取数据）。

如果您正在寻找一个仅将某些页面呈现为静态HTML的混合站点，那么Next.js已经为您自动完成了！阅读有关自动静态优化的详细信息。

next export还会导致诸如增量静态生成和重新生成之类的功能根据需要被禁用，next start或者无服务器部署才能起作用。

如何使用它

像通常使用Next.js一样开发应用程序。然后运行：

next build && next export

为此，您可能需要package.json像这样更新脚本：

"scripts": {
  "build": "next build && next export"
}

并使用以下命令运行它：

npm run build

然后，您将在out目录中拥有应用程序的静态版本。

默认情况下next export不需要任何配置。它将为pages目录中的每个页面输出一个静态HTML文件（或为动态路由输出更多的HTML文件，它会getStaticPaths根据结果调用并生成页面）。对于更高级的方案，您可以exportPathMap在next.config.js文件中定义一个称为的参数，以准确配置将生成哪些页面。

部署方式

默认情况下，next export将生成一个out目录，任何静态托管服务或CDN均可提供该目录。

即使您的Next.js应用程序是完全静态的，我们也强烈建议您使用Vercel。Vercel已经过优化，可以使静态Next.js应用程序快速地运行。next export与Vercel上的“零配置”部署一起使用。

注意事项

• 使用next export，我们可以为您的应用构建HTML版本。在导出时，我们要求getStaticProps导出它的每个页面，然后将结果传递给页面的组件。也可以使用较早的getInitialPropsAPI代替getStaticProps，但要注意以下几点：
  • getInitialProps不能在任何给定页面的旁边getStaticProps或getStaticPaths页面上使用。如果您具有动态路由，则getStaticPaths需要exportPathMap在next.config.js文件中配置参数以使导出程序知道应该输出哪些HTML文件，而不是使用该路由。
  • 当getInitialProps导出过程中被调用时，req和res它的领域context参数将是空的对象，因为导出过程中不存在服务器上运行。
  • getInitialProps 将在每次客户端导航上被调用，如果您只想在构建时获取数据，请切换至getStaticProps。
  • getInitialProps应该从API提取，并且不能像can那样使用Node.js特定的库或文件系统getStaticProps。我们推荐使用走向和迁移getStaticProps了getInitialProps只要有可能。
• 使用时fallback: true，getStaticPaths不支持的模式next export。
• 此方法不支持API路由，因为它们无法预先呈现为HTML。
• getServerSideProps不能在页面内使用，因为该方法需要服务器。考虑getStaticProps改为使用。
• 不支持国际化路由，因为它需要Next.js的服务器端路由。
• 在next/image使用时，组件的默认加载器不支持next export。但是，其他加载程序选项也可以使用。