NextJS中文文档 - Production Checklist
在将 Next.js 应用程序投入生产环境之前，有一些优化和模式你应该考虑实施，以获得最佳的用户体验、性能和安全性。
本页提供了最佳实践，你可以在构建应用程序和投入生产环境之前使用这些实践作为参考，以及你应该了解的自动 Next.js 优化。
自动优化
这些 Next.js 优化默认启用，无需配置：
这些默认设置旨在提高应用程序的性能，并减少每个网络请求的成本和传输的数据量。
开发过程中
在构建应用程序时，我们建议使用以下功能来确保最佳性能和用户体验：
路由和渲染
数据获取和缓存
UI 和可访问性
- 字体模块： 通过使用字体模块优化字体，该模块自动将你的字体文件与其他静态资源一起托管，消除外部网络请求，并减少布局偏移。
<Image>组件： 通过使用图像组件优化图像，该组件自动优化图像，防止布局偏移，并以 WebP 等现代格式提供图像。<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 包的大小，并识别可能影响应用程序性能的大型模块和依赖项。
此外，以下工具可以帮助你了解向应用程序添加新依赖项的影响：
