Skip to main content

生产检查表

您应该考虑实施一些优化和模式，以确保最佳的用户体验、性能和安全性。

This page provides best practices that you can use as a reference when building your application, before going to production, and after deployment - as well as the automatic Next.js optimizations you should be aware of. 此页面提供了您可以在构建应用程序、投入生产之前和部署之后用作参考的最佳实践- 以及您应该了解的Next.js 自动优化。

自动优化​

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

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

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

在开发过程中​

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

路由和渲染​

您需要知道: 部分预渲染(实验性) 允许路由的部分内容是动态的，而无需将整个路由切换到动态渲染。

数据获取和缓存​

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

UI 和可访问性​

  • 表单和验证: 使用服务器操作处理表单提交、服务器端验证和错误处理。

  • 字体模块: 使用字体模块优化字体，该模块会自动将您的字体文件与其他静态资源一起托管，消除外部网络请求，并减少布局偏移。

  • <img> 组件: 使用 Image 组件优化图像，该组件会自动优化图像，防止布局偏移，并以现代格式（如 WebP 或 AVIF）提供图像。

  • <Script> 组件: 使用 Script 组件优化第三方脚本，该组件会自动延迟脚本执行，防止它们阻塞主线程。

  • ESLint: 使用内置的eslint-plugin-jsx-a11y插件，及早捕捉可访问性问题。

安全​

  • 污染: 通过污染数据对象和/或特定值来防止敏感数据暴露给客户端。

  • 服务器操作: 确保用户有权调用服务器操作。请查看推荐的安全实践。

  • 环境变量: 确保将您的.env.*文件添加到.gitignore中，并且只有公共变量以NEXT_PUBLIC_为前缀。

  • 内容安全策略: 考虑添加内容安全策略 (CSP) 以保护您的应用程序免受各种安全威胁，例如跨站脚本 (XSS)、点击劫持和其他代码注入攻击。

Metadata 和 SEO​

  • Metadata API: 通过添加页面标题、描述等使用 Metadata API 来提高您的应用程序的搜索引擎优化 (SEO)。
  • Open Graph (OG) images: 创建 OG 图像以为您的应用程序的社交分享做好准备。
  • Sitemaps 和 Robots: 通过生成站点地图和 robots 文件来帮助搜索引擎抓取和索引您的页面。

类型安全​

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

投入生产之前​

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

核心网络指标​

  • Lighthouse: 在无痕浏览模式下运行 Lighthouse，以更好地了解用户如何体验您的网站，并识别需要改进的地方。这是一个模拟测试，应与实际数据（如核心网络指标）结合使用。

  • useReportWebVitals hook: 使用此 hook 将核心网络指标数据发送到分析工具。

分析捆绑包​

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

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

部署后​

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

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

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

您需要知道:

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

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