生产环境检查清单
在将 Next.js 应用部署到生产环境前，您应考虑实施一些优化措施和模式，以获得最佳的用户体验、性能和安全性。
本页提供了最佳实践指南，可作为应用开发阶段、上线前准备和部署后的参考，同时也列出了您需要了解的Next.js自动优化项。
自动优化
以下Next.js优化功能默认启用且无需配置：
- 代码分割 (Code-splitting): Next.js 会按页面自动分割应用代码，确保导航时只加载当前页面所需代码。您也可以考虑在适当场景下对第三方库进行懒加载 (lazy loading)。
- 预获取 (Prefetching): 当用户视窗中出现新路由链接时，Next.js 会在后台预获取该路由，实现近乎即时的导航体验。您可以在必要时禁用此功能。
- 自动静态优化 (Automatic Static Optimization): 对于无阻塞数据需求的页面，Next.js 会自动判定为可预渲染的静态页面。优化后的页面可被缓存并通过多个CDN节点分发给终端用户。您也可以选择启用服务端渲染 (Server-side Rendering)。
这些默认优化旨在提升应用性能，减少每次网络请求的数据传输量和成本。
开发阶段
在构建应用时，我们推荐使用以下功能来确保最佳性能和用户体验：
路由与渲染
数据获取与缓存
- API路由 (API Routes): 使用路由处理器访问后端资源，防止敏感信息暴露给客户端。
- 数据缓存 (Data Caching): 验证数据请求是否被缓存，并在适当时启用缓存。确保未使用
getStaticProps的请求在适当时也能被缓存。 - 增量静态再生 (Incremental Static Regeneration): 使用增量静态再生功能在构建后更新静态页面，而无需重新构建整个站点。
- 静态资源 (Static Images): 使用
public目录自动缓存应用的静态资源（如图片）。
UI与可访问性
- 字体模块 (Font Module): 通过字体模块优化字体，该功能会自动托管字体文件与其他静态资源，消除外部网络请求并减少布局偏移 (layout shift)。
<Image>组件: 使用图片组件自动优化图片，防止布局偏移，并提供WebP或AVIF等现代格式。<Script>组件: 使用脚本组件优化第三方脚本，自动延迟加载并防止阻塞主线程。- ESLint: 使用内置的
eslint-plugin-jsx-a11y插件及早发现可访问性问题。
安全性
- 环境变量 (Environment Variables): 确保
.env.*文件已加入.gitignore，且只有公开变量以NEXT_PUBLIC_为前缀。 - 内容安全策略 (Content Security Policy): 考虑添加内容安全策略以防范跨站脚本、点击劫持等代码注入攻击。
元数据与SEO
<Head>组件: 使用next/head组件添加页面标题、描述等信息。
类型安全
- TypeScript 和 TS插件: 使用TypeScript及其插件获得更好的类型安全，及早发现错误。
上线前准备
在上线前，可运行next build在本地构建应用以捕获构建错误，然后运行next start在类生产环境中测量应用性能。
核心网页指标
- Lighthouse: 在隐身模式下运行Lighthouse测试，了解用户体验并发现优化点。这是模拟测试，应与实际数据（如核心网页指标）结合分析。
包分析
使用@next/bundle-analyzer插件分析JavaScript包体积，识别可能影响性能的大型模块和依赖。
以下工具可帮助评估新依赖的影响：
部署后
根据部署平台的不同，您可能获得额外的监控和优化工具。
对于Vercel部署，我们推荐：
- 分析 (Analytics): 内置分析仪表板，帮助了解应用流量（包括独立访客、页面浏览量等）。
- 速度洞察 (Speed Insights): 基于真实用户数据的性能洞察，反映网站在实际环境中的表现。
- 日志 (Logging): 运行时和活动日志帮助调试生产环境问题。也可查看集成页面获取第三方工具列表。
须知:
要全面了解Vercel生产部署的最佳实践（包括提升网站性能的详细策略），请参阅Vercel生产检查清单。
遵循这些建议将帮助您为用户构建更快、更可靠且更安全的应用程序。