Menu

Production Checklist

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

本页提供了最佳实践,你可以将其作为参考,用于 构建应用程序生产环境部署之前 以及 部署之后 - 同时还包括你应该了解的 Next.js 自动优化

自动优化

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

  • 代码分割: Next.js 自动按页面对应用程序代码进行代码分割。这意味着在导航时只加载当前页面所需的代码。你还可以考虑在适当的地方 懒加载 第三方库。
  • 预取: 当指向新路由的链接进入用户视口时,Next.js 会在后台预取该路由。这使得导航到新路由几乎是即时的。你可以在适当的地方选择退出预取。
  • 自动静态优化: 如果页面没有阻塞性数据要求,Next.js 会自动确定该页面是静态的 (可以预渲染)。优化后的页面可以被缓存,并从多个 CDN 位置提供给最终用户。你可以在适当的地方选择 服务器端渲染

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

在开发过程中

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

路由和渲染

数据获取和缓存

  • API 路由: 使用路由处理程序访问后端资源,并防止敏感机密暴露给客户端。
  • 数据缓存: 验证你的数据请求是否正在被缓存,并在适当的地方选择缓存。确保不使用 getStaticProps 的请求在适当的地方被缓存。
  • 增量静态再生成: 使用增量静态再生成在静态页面构建后更新它们,而无需重新构建整个站点。
  • 静态图像: 使用 public 目录自动缓存应用程序的静态资源,例如图像。

UI 和可访问性

  • 字体模块: 通过使用字体模块优化字体,它会自动将你的字体文件与其他静态资源一起托管,消除外部网络请求,并减少 布局偏移
  • <Image> 组件: 使用图像组件优化图像,它会自动优化图像,防止布局偏移,并以现代格式如 WebP 或 AVIF 提供图像。
  • <Script> 组件: 使用脚本组件优化第三方脚本,它会自动延迟脚本并防止它们阻塞主线程。
  • ESLint: 使用内置的 eslint-plugin-jsx-a11y 插件尽早捕获可访问性问题。

安全

  • 环境变量: 确保你的 .env.* 文件已添加到 .gitignore 中,并且只有公共变量以 NEXT_PUBLIC_ 为前缀。
  • 内容安全策略: 考虑添加内容安全策略,以保护你的应用程序免受各种安全威胁,如跨站脚本、点击劫持和其他代码注入攻击。

元数据和 SEO

  • <Head> 组件: 使用 next/head 组件添加页面标题、描述等。

类型安全

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

生产环境部署前的准备

在部署到生产环境之前,你可以运行 next build 在本地构建应用并捕获任何构建错误,然后运行 next start 在类生产环境中测量应用的性能。

核心网页指标

  • Lighthouse 在无痕模式下运行 Lighthouse,以更好地了解用户将如何体验你的网站,并识别需要改进的地方。这是一个模拟测试,应与查看实际数据 (如核心网页指标) 配合使用。

分析打包文件

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

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

部署后

根据你部署应用的位置,你可能可以访问额外的工具和集成,以帮助你监控和改进应用的性能。

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

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

值得注意的是

要全面了解 Vercel 上生产部署的最佳实践,包括改善网站性能的详细策略,请参考 Vercel 生产清单

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