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根据结果调用并生成页面)。对于更高级的方案,您可以exportPathMapnext.config.js文件中定义一个称为的参数,以准确配置将生成哪些页面。

部署方式

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

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

注意事项

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

作者:terry,如若转载,请注明出处:https://www.web176.com/nextjs/2440.html

(1)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年4月20日 下午2:56
下一篇 2021年4月20日 下午3:03

相关推荐

发表回复

登录后才能评论