生产清单
在将您的 Next.js 应用程序投入生产之前，您应该考虑实施一些优化和模式，以获得最佳的用户体验、性能和安全性。
本页面提供了您可以在构建应用程序、投入生产前和部署后时使用的的最佳实践，以及您应该了解的自动 Next.js 优化。
自动优化
这些 Next.js 优化默认启用，无需配置：
这些默认设置旨在提高您的应用程序性能，并减少每次网络请求的成本和数据传输量。
在开发中
在构建应用程序时，我们建议您使用以下功能以确保最佳性能和用户体验：
路由和渲染
### 数据获取与缓存UI与可访问性
- 字体模块: 通过使用字体模块优化字体，它会自动托管您的字体文件与其他静态资源，减少外部网络请求，并减少布局偏移。
<Image>组件: 通过使用Image组件优化图片，它会自动优化图片，防止布局偏移，并以WebP或AVIF等现代格式提供服务。<Script>组件: 通过使用Script组件优化第三方脚本，它会自动延迟脚本并防止它们阻塞主线程。- ESLint: 使用内置的
eslint-plugin-jsx-a11y插件尽早捕捉可访问性问题。
安全
- 环境变量: 确保你的
.env.*文件被添加到.gitignore中，并且只有公共变量以NEXT_PUBLIC_为前缀。 - 内容安全策略: 考虑添加内容安全策略，以保护你的应用程序免受各种安全威胁，如跨站脚本攻击、点击劫持和其他代码注入攻击。
元数据和SEO
类型安全
- TypeScript和TS插件: 使用TypeScript和TypeScript插件来提高类型安全性，并帮助你尽早发现错误。
上线前须知
在上线前，你可以运行 next build 来本地构建你的应用程序并捕捉任何构建错误，然后运行 next start 来衡量你的应用程序在类似生产环境中的性能。
核心网络指标
- Lighthouse: 在隐身模式下运行Lighthouse，以更好地了解用户将如何体验你的网站，并确定改进的领域。这是一个模拟测试，应该与查看现场数据（如核心网络指标）配对。
分析捆绑包
使用 @next/bundle-analyzer 插件 来分析你的JavaScript捆绑包的大小，并识别可能影响你的应用程序性能的大型模块和依赖项。
此外，以下工具可以帮助你了解添加新依赖项到你的应用程序的影响：
部署后
根据您部署应用程序的位置，您可能可以访问其他工具和集成，以帮助您监控和改善应用程序的性能。
对于 Vercel 部署，我们建议以下内容：
- 分析： 一个内置的分析仪表板，帮助您了解应用程序的流量，包括独立访客数量、页面浏览量等。
- 速度洞察： 基于访客数据的实际性能洞察，提供您的网站在实际使用中的性能的实用视角。
- 日志记录： 运行时和活动日志，帮助您调试问题并监控生产中的应用程序。或者，查看 集成页面 以获取第三方工具和服务的列表。
须知：
要全面了解 Vercel 上生产部署的最佳实践，包括改善网站性能的详细策略，请参考 Vercel 生产检查清单。
遵循这些建议将帮助您为您的用户构建更快、更可靠、更安全的应用程序。