跳到主要内容

如何优化你的 Next.js 应用程序以用于生产环境

在将你的 Next.js 应用程序部署到生产环境之前，有一些优化和模式你应该考虑实施，以确保最佳的用户体验、性能和安全性。

本页面提供了最佳实践，你可以在构建应用程序和部署到生产环境之前时用作参考，以及你应该了解的自动 Next.js 优化。

自动优化​

这些 Next.js 优化默认启用，无需配置：

  • 服务端组件: Next.js 默认使用服务端组件。服务端组件在服务器上运行，不需要 JavaScript 在客户端渲染。因此，它们不会影响客户端 JavaScript 包的大小。然后你可以根据需要使用客户端组件来实现交互性。
  • 代码分割: 服务端组件通过路由段实现自动代码分割。你也可以考虑在适当的地方懒加载客户端组件和第三方库。
  • 预取: 当指向新路由的链接进入用户的视口时，Next.js 会在后台预取该路由。这使得导航到新路由几乎瞬间完成。你可以在适当的地方选择退出预取。
  • 静态渲染: Next.js 在构建时在服务器上静态渲染服务端和客户端组件，并缓存渲染结果以提高应用程序的性能。你可以在适当的地方选择动态渲染特定路由。
  • 缓存: Next.js 缓存数据请求、服务端和客户端组件的渲染结果、静态资源等，以减少对服务器、数据库和后端服务的网络请求数量。你可以在适当的地方选择退出缓存。
  • 代码分割: Next.js 按页面自动分割你的应用程序代码。这意味着在导航时只加载当前页面所需的代码。你也可以考虑在适当的地方懒加载第三方库。
  • 预取: 当指向新路由的链接进入用户的视口时，Next.js 会在后台预取该路由。这使得导航到新路由几乎瞬间完成。你可以在适当的地方选择退出预取。
  • 自动静态优化: 如果页面没有阻塞数据要求，Next.js 会自动确定页面是静态的（可以预渲染）。优化的页面可以被缓存，并从多个 CDN 位置提供给最终用户。你可以在适当的地方选择服务端渲染。

这些默认设置旨在提高应用程序的性能，并减少每次网络请求的成本和数据传输量。

开发期间​

在构建应用程序时，我们建议使用以下功能来确保最佳性能和用户体验：

路由和渲染​

提示: 部分预渲染（实验性）将允许路由的部分内容动态化，而无需将整个路由选择为动态渲染。

数据获取和缓存​

  • 服务端组件: 利用服务端组件在服务器上获取数据的好处。
  • 路由处理器: 使用路由处理器从客户端组件访问你的后端资源。但不要从服务端组件调用路由处理器以避免额外的服务器请求。
  • 流式渲染: 使用加载界面和 React Suspense 逐步从服务器向客户端发送 UI，并防止整个路由在获取数据时被阻塞。
  • 并行数据获取: 通过在适当的地方并行获取数据来减少网络瀑布。另外，考虑在适当的地方预加载数据。
  • 数据缓存: 验证你的数据请求是否被缓存，并在适当的地方选择缓存。确保不使用 fetch 的请求被缓存。
  • 静态图片: 使用 public 目录自动缓存应用程序的静态资源，例如图片。
  • API 路由: 使用路由处理器访问你的后端资源，并防止敏感密钥暴露给客户端。
  • 数据缓存: 验证你的数据请求是否被缓存，并在适当的地方选择缓存。确保不使用 getStaticProps 的请求在适当的地方被缓存。
  • 增量静态再生成: 使用增量静态再生成在构建后更新静态页面，而无需重建整个站点。
  • 静态图片: 使用 public 目录自动缓存应用程序的静态资源，例如图片。

UI 和可访问性​

  • 表单和验证: 使用服务端操作处理表单提交、服务端验证和处理错误。
  • 字体模块: 通过使用字体模块优化字体，该模块自动托管你的字体文件与其他静态资源，移除外部网络请求，并减少布局偏移。
  • <Image> 组件: 通过使用图片组件优化图片，该组件自动优化图片，防止布局偏移，并以 WebP 等现代格式提供它们。
  • <Script> 组件: 通过使用脚本组件优化第三方脚本，该组件自动延迟脚本并防止它们阻塞主线程。
  • ESLint: 使用内置的 eslint-plugin-jsx-a11y 插件及早发现可访问性问题。

安全性​

  • 污染: 通过污染数据对象和/或特定值来防止敏感数据暴露给客户端。
  • 服务端操作: 确保用户有权调用服务端操作。查看推荐的安全实践。
  • 环境变量: 确保你的 .env.* 文件已添加到 .gitignore 中，并且只有公共变量以 NEXT_PUBLIC_ 为前缀。
  • 内容安全策略: 考虑添加内容安全策略来保护你的应用程序免受各种安全威胁，如跨站脚本、点击劫持和其他代码注入攻击。

元数据和 SEO​

  • 元数据 API: 使用元数据 API 通过添加页面标题、描述等来改善应用程序的搜索引擎优化（SEO）。
  • Open Graph (OG) 图片: 创建 OG 图片以为社交分享准备你的应用程序。
  • 站点地图和机器人: 通过生成站点地图和机器人文件来帮助搜索引擎爬取和索引你的页面。
  • <Head> 组件: 使用 next/head 组件添加页面标题、描述等。

类型安全​

  • TypeScript 和 TS 插件: 使用 TypeScript 和 TypeScript 插件来获得更好的类型安全性，并帮助你及早发现错误。

部署到生产环境之前​

在部署到生产环境之前，你可以运行 next build 在本地构建应用程序并捕获任何构建错误，然后运行 next start 来测量类生产环境中应用程序的性能。

核心 Web 指标​

  • Lighthouse: 在无痕模式下运行 lighthouse 以更好地了解用户将如何体验你的网站，并识别改进领域。这是一个模拟测试，应该与查看现场数据（如核心 Web 指标）配对。

分析包​

使用 @next/bundle-analyzer 插件来分析 JavaScript 包的大小，并识别可能影响应用程序性能的大型模块和依赖项。

此外，以下工具可以帮助你了解向应用程序添加新依赖项的影响：

最后于 更新