跳至内容
构建您的应用程序部署生产环境检查清单

生产环境检查清单

在将您的 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 或 AVIF）提供服务。
  • <Script> 组件: 通过使用 Script 组件优化第三方脚本，该组件会自动延迟脚本并防止其阻塞主线程。
  • ESLint: 使用内置的 eslint-plugin-jsx-a11y 插件尽早捕获可访问性问题。

安全性

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

元数据和 SEO

  • 元数据 API: 使用元数据 API 通过添加页面标题、描述等来改善应用程序的搜索引擎优化 (SEO)。
  • 开放图谱 (OG) 图片: 创建 OG 图片以准备应用程序进行社交分享。
  • 站点地图 和 Robots: 通过生成站点地图和 Robots 文件帮助搜索引擎抓取和索引您的页面。

类型安全

  • TypeScript 和 TS 插件: 使用 TypeScript 和 TypeScript 插件获得更好的类型安全，并帮助您尽早捕获错误。

发布前

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

核心 Web 指标

  • Lighthouse: 在隐身模式下运行 Lighthouse，以更好地了解用户体验您的网站的方式，并确定需要改进的领域。这是一个模拟测试，应与查看现场数据（例如核心 Web 指标）相结合。

分析捆绑包

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

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

部署后

根据您部署应用程序的位置，您可能可以访问其他工具和集成，以帮助您监控和提高应用程序的性能。

对于 Vercel 部署，我们推荐以下内容

  • 分析: 一个内置的分析仪表板，可帮助您了解应用程序的流量，包括唯一访客数、页面浏览量等。

  • 速度洞察: 基于访客数据的真实世界性能洞察，提供您网站在实际环境中表现的实用视图。
  • 日志记录: 运行时和活动日志，帮助您调试问题并在生产环境中监控您的应用程序。或者，请参阅 集成页面 以获取第三方工具和服务的列表。

了解一下

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

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