生产环境清单
在将你的 Next.js 应用程序投入生产环境之前，有一些优化和模式你应该考虑实施，以获得最佳的用户体验、性能和安全性。
此页面提供了最佳实践，你可以将其用作参考，在构建你的应用程序、上线生产环境之前和部署后 - 以及你应该了解的自动 Next.js 优化时。
自动优化
这些 Next.js 优化默认启用，无需配置
- 代码拆分： Next.js 自动按页面代码拆分你的应用程序代码。这意味着在导航时仅加载当前页面所需的代码。你还可以考虑在适当的情况下懒加载第三方库。
- 预取： 当指向新路由的链接进入用户的视口时，Next.js 在后台预取路由。这使得导航到新路由几乎是瞬间完成的。你可以在适当的情况下选择退出预取。
- 自动静态优化： 如果页面没有阻塞数据要求，Next.js 会自动确定该页面是静态的（可以预渲染）。优化的页面可以被缓存，并从多个 CDN 位置提供给最终用户。你可以在适当的情况下选择服务器端渲染。
这些默认设置旨在提高应用程序的性能，并减少每次网络请求的成本和数据传输量。
在开发期间
在构建你的应用程序时，我们建议使用以下功能以确保最佳的性能和用户体验
路由和渲染
数据获取和缓存
- API 路由： 使用路由处理程序访问你的后端资源，并防止敏感机密信息暴露给客户端。
- 数据缓存： 验证你的数据请求是否正在被缓存，并在适当的情况下选择缓存。确保未使用
getStaticProps的请求在适当的情况下被缓存。 - 增量静态再生： 使用增量静态再生在静态页面构建后更新它们，而无需重建你的整个站点。
- 静态图像： 使用
public目录自动缓存你的应用程序的静态资源，例如图像。
UI 和无障碍性
- 字体模块： 通过使用字体模块优化字体，该模块自动托管你的字体文件和其他静态资源，删除外部网络请求，并减少布局偏移。
<Image>组件： 通过使用图像组件优化图像，该组件自动优化图像，防止布局偏移，并以现代格式（如 WebP）提供它们。<Script>组件： 通过使用脚本组件优化第三方脚本，该组件自动延迟脚本并防止它们阻塞主线程。- ESLint： 使用内置的
eslint-plugin-jsx-a11y插件尽早发现无障碍性问题。
安全性
- 环境变量： 确保你的
.env.*文件已添加到.gitignore，并且只有公共变量以NEXT_PUBLIC_为前缀。 - 内容安全策略： 考虑添加内容安全策略，以保护你的应用程序免受各种安全威胁，例如跨站脚本攻击、点击劫持和其他代码注入攻击。
元数据和 SEO
<Head>组件： 使用next/head组件添加页面标题、描述等。
类型安全
- TypeScript 和 TS 插件： 使用 TypeScript 和 TypeScript 插件以获得更好的类型安全，并帮助你尽早发现错误。
在上线生产环境之前
在上线生产环境之前，你可以运行 next build 在本地构建你的应用程序并捕获任何构建错误，然后运行 next start 来衡量你的应用程序在类生产环境中的性能。
Core Web Vitals
- Lighthouse： 在隐身模式下运行 Lighthouse 以更好地了解你的用户将如何体验你的站点，并识别需要改进的领域。这是一个模拟测试，应与查看现场数据（如 Core Web Vitals）相结合。
分析捆绑包
使用 @next/bundle-analyzer 插件分析你的 JavaScript 捆绑包的大小，并识别可能影响你的应用程序性能的大型模块和依赖项。
此外，以下工具可以帮助你了解向应用程序添加新依赖项的影响
部署后
根据你部署应用程序的位置，你可能可以使用其他工具和集成来帮助你监控和改进应用程序的性能。
对于 Vercel 部署，我们建议以下内容
- 分析： 一个内置的分析仪表板，可帮助你了解应用程序的流量，包括唯一身份访问者数量、页面浏览量等。
- Speed Insights： 基于访问者数据的真实世界性能洞察，提供你的网站在现场表现的实际视图。
- 日志记录： 运行时和活动日志，帮助你调试问题并在生产环境中监控你的应用程序。或者，请参阅集成页面，以获取第三方工具和服务的列表。
须知
要全面了解 Vercel 上生产环境部署的最佳实践，包括改进网站性能的详细策略，请参阅Vercel 生产环境清单。
遵循这些建议将帮助你为用户构建更快、更可靠和更安全的应用程序。
这有帮助吗？