跳到内容
构建你的应用部署生产环境检查清单

生产环境检查清单

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

本页提供了最佳实践，你可以将其作为参考，在构建你的应用程序、进入生产环境之前和部署之后使用 - 以及你应该了解的自动 Next.js 优化。

自动优化

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

  • 服务器组件： Next.js 默认使用服务器组件。服务器组件在服务器上运行，不需要 JavaScript 在客户端渲染。因此，它们对客户端 JavaScript 包的大小没有影响。然后你可以根据需要使用客户端组件来实现交互性。
  • 代码拆分： 服务器组件支持按路由段自动代码拆分。你还可以考虑在适当的情况下懒加载客户端组件和第三方库。
  • 预取： 当指向新路由的链接进入用户视口时，Next.js 在后台预取路由。这使得导航到新路由几乎是瞬间完成的。你可以在适当的情况下选择退出预取。
  • 静态渲染： Next.js 在构建时在服务器上静态渲染服务器和客户端组件，并缓存渲染结果以提高应用程序的性能。你可以在适当的情况下选择动态渲染用于特定路由。
  • 缓存： Next.js 缓存数据请求、服务器和客户端组件的渲染结果、静态资源等，以减少对你的服务器、数据库和后端服务的网络请求数量。你可以在适当的情况下选择退出缓存。

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

在开发期间

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

路由和渲染

须知：部分预渲染（实验性）将允许路由的部分是动态的，而无需使整个路由都进行动态渲染。

数据获取和缓存

  • 服务器组件： 利用在服务器上使用服务器组件获取数据的好处。
  • 路由处理器： 使用路由处理器从客户端组件访问你的后端资源。但不要从服务器组件调用路由处理器，以避免额外的服务器请求。
  • 流式处理： 使用加载 UI 和 React Suspense 逐步从服务器向客户端发送 UI，并防止在获取数据时阻塞整个路由。
  • 并行数据获取： 在适当的情况下并行获取数据，以减少网络瀑布流。此外，在适当的情况下考虑预加载数据。
  • 数据缓存： 验证你的数据请求是否被缓存，并在适当的情况下选择启用缓存。确保不使用 fetch 的请求被缓存。
  • 静态图像： 使用 public 目录自动缓存应用程序的静态资源，例如图像。

UI 和无障碍性

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

安全性

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

元数据和 SEO

  • 元数据 API： 使用元数据 API 通过添加页面标题、描述等来改进应用程序的搜索引擎优化 (SEO)。
  • Open Graph (OG) 图像： 创建 OG 图像，为你的应用程序进行社交分享做好准备。
  • 站点地图和Robots： 通过生成站点地图和 robots 文件，帮助搜索引擎抓取和索引你的页面。

类型安全

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

在进入生产环境之前

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

Core Web Vitals

  • Lighthouse： 在隐身模式下运行 Lighthouse，以更好地了解你的用户将如何体验你的网站，并识别需要改进的领域。这是一个模拟测试，应与查看现场数据（如 Core Web Vitals）相结合。

分析捆绑包

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

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

部署后

根据你部署应用程序的位置，你可能可以使用其他工具和集成来帮助你监控和改进应用程序的性能。

对于 Vercel 部署，我们建议以下内容

  • 分析： 内置的分析仪表板，可帮助你了解应用程序的流量，包括唯一身份访问者的数量、页面浏览量等。
  • Speed Insights： 基于访问者数据的真实世界性能洞察，提供你的网站在现场表现的实用视图。
  • 日志记录： 运行时和活动日志，可帮助你调试问题并在生产环境中监控应用程序。或者，请参阅集成页面，获取第三方工具和服务的列表。

须知

要全面了解 Vercel 上生产环境部署的最佳实践，包括改进网站性能的详细策略，请参阅Vercel 生产环境检查清单。

遵循这些建议将帮助你为用户构建更快、更可靠和更安全的应用程序。