跳到内容
应用路由指南生产

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

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

本页面提供了最佳实践，您可以将其作为构建应用程序和发布到生产环境之前的参考，以及您应该了解的Next.js 自动优化。

自动优化

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

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

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

开发过程中

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

路由和渲染

值得注意的是：部分预渲染（实验性）将允许路由的部分动态化，而无需将整个路由选择动态渲染。

数据获取和缓存

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

UI 和可访问性

  • 表单和验证：使用服务器操作来处理表单提交、服务器端验证和错误处理。
  • 全局错误 UI：添加 app/global-error.tsx 以提供一致、可访问的备用 UI，并为应用程序中未捕获的错误提供恢复。
  • 全局 404：添加 app/global-not-found.tsx 为应用程序中不匹配的路由提供可访问的 404 页面。
  • 字体模块：通过使用字体模块来优化字体，该模块会自动将您的字体文件与其他静态资产一起托管，消除外部网络请求，并减少布局偏移。
  • <Image> 组件：通过使用图片组件来优化图片，该组件会自动优化图片，防止布局偏移，并以 WebP 等现代格式提供图片。
  • <Script> 组件：通过使用脚本组件来优化第三方脚本，该组件会自动延迟脚本并防止它们阻塞主线程。
  • ESLint：使用内置的eslint-plugin-jsx-a11y插件及早捕获可访问性问题。

安全

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

元数据和 SEO

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

类型安全

  • TypeScript 和TS 插件：使用 TypeScript 和 TypeScript 插件来提高类型安全，并帮助您及早发现错误。

发布到生产环境之前

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

核心 Web 指标

  • Lighthouse：在无痕模式下运行 Lighthouse，以便更好地了解用户如何体验您的网站，并确定需要改进的领域。这是一种模拟测试，应与查看实际数据（如核心 Web 指标）结合使用。

分析捆绑包

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

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