生产环境检查清单
在将 Next.js 应用程序部署到生产环境之前，有一些优化和模式你应该考虑实施，以获得最佳的用户体验、性能和安全性。
本页提供了最佳实践，你可以将其作为参考，用于 构建应用程序、生产环境部署之前 以及 部署之后 - 同时还包括你应该了解的 Next.js 自动优化。
自动优化
这些 Next.js 优化默认启用，无需配置：
- 服务器组件: Next.js 默认使用服务器组件。服务器组件在服务器上运行，不需要 JavaScript 在客户端渲染。因此，它们对客户端 JavaScript 包的大小没有影响。你可以根据需要使用 客户端组件 来实现交互性。
- 代码分割: 服务器组件实现了按路由段自动代码分割。你还可以考虑在适当的地方 懒加载 客户端组件和第三方库。
- 预取: 当指向新路由的链接进入用户视口时，Next.js 会在后台预取该路由。这使得导航到新路由几乎是即时的。你可以在适当的地方选择退出预取。
- 静态渲染: Next.js 在构建时在服务器上静态渲染服务器和客户端组件，并缓存渲染结果以提高应用程序的性能。你可以为特定路由选择 动态渲染，在适当的地方。
- 缓存: Next.js 缓存数据请求、服务器和客户端组件的渲染结果、静态资源等，以减少对服务器、数据库和后端服务的网络请求。你可以在适当的地方选择退出缓存。
这些默认设置旨在提高应用程序的性能，并减少每个网络请求的成本和传输的数据量。
在开发过程中
在构建应用程序时，我们建议使用以下功能来确保最佳性能和用户体验：
路由和渲染
- 布局: 使用布局在页面之间共享 UI，并在导航时启用 部分渲染。
<Link>组件: 使用<Link>组件实现 客户端导航和预取。- 错误处理: 通过创建自定义错误页面，优雅地处理生产环境中的 通用错误 和 404 错误。
- 组合模式: 遵循服务器和客户端组件的推荐组合模式，并检查
"use client"边界 的放置，以避免不必要地增加客户端 JavaScript 包的大小。 - **动态 API：**请注意，像
cookies和searchParams这样的动态 API 会将整个路由转为动态渲染（如果在根布局中使用，则会影响整个应用）。请确保动态 API 的使用是有意为之的，并在适当的情况下使用<Suspense>边界包装它们。
值得注意的是：部分预渲染（实验性）将允许路由中的部分内容保持动态，而不会使整个路由都转为动态渲染。
数据获取和缓存
- 服务器组件: 利用在服务器上获取数据的服务器组件的优势。
- 路由处理程序: 使用路由处理程序从客户端组件访问后端资源。但不要从服务器组件调用路由处理程序，以避免额外的服务器请求。
- 流式传输: 使用加载 UI 和 React Suspense 逐步从服务器向客户端发送 UI，并防止在获取数据时整个路由被阻塞。
- 并行数据获取: 在适当的地方并行获取数据，以减少网络瀑布。另外，考虑在适当的地方 预加载数据。
- 数据缓存: 验证你的数据请求是否正在被缓存，并在适当的地方选择缓存。确保不使用
fetch的请求也被 缓存。 - 静态图像: 使用
public目录自动缓存应用程序的静态资源，例如图像。
UI 和可访问性
- 表单和验证: 使用服务器操作处理表单提交、服务器端验证和错误处理。
- 字体模块: 通过使用字体模块优化字体，它会自动将你的字体文件与其他静态资源一起托管，消除外部网络请求，并减少 布局偏移。
<Image>组件: 使用图像组件优化图像，它会自动优化图像，防止布局偏移，并以现代格式如 WebP 或 AVIF 提供图像。<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 在类生产环境中测量应用的性能。
核心网页指标
- Lighthouse： 在无痕模式下运行 Lighthouse，以更好地了解用户将如何体验你的网站，并识别需要改进的地方。这是一个模拟测试，应与查看实际数据 (如核心网页指标) 配合使用。
useReportWebVitalshook： 使用此 hook 将 核心网页指标 数据发送到分析工具。
分析打包文件
使用 @next/bundle-analyzer 插件 分析 JavaScript 打包文件的大小，并识别可能影响应用性能的大型模块和依赖项。
此外，以下工具可以帮助你了解向应用添加新依赖项的影响：
部署后
根据你部署应用的位置，你可能可以访问额外的工具和集成，以帮助你监控和改进应用的性能。
对于 Vercel 部署，我们推荐以下内容：
- Analytics： 内置的分析仪表板，帮助你了解应用的流量，包括独立访客数、页面浏览量等。
- Speed Insights： 基于访客数据的实际性能洞察，提供网站在实际环境中表现的实用视图。
- Logging： 运行时和活动日志，帮助你调试问题并在生产环境中监控应用。或者，查看 集成页面 以获取第三方工具和服务列表。
值得注意的是：
要全面了解 Vercel 上生产部署的最佳实践，包括改善网站性能的详细策略，请参考 Vercel 生产清单。
遵循这些建议将帮助你为用户构建一个更快、更可靠、更安全的应用。