Next.js 生产环境优化指南
在将 Next.js 应用部署至生产环境前，您应当考虑实施以下优化措施和模式，以获得最佳的用户体验、性能和安全性。
本页提供了最佳实践指南，可作为应用开发阶段和上线前准备的参考，同时介绍了您需要了解的Next.js自动优化机制。
自动优化
以下 Next.js 优化功能默认启用且无需配置：
- 服务端组件 (Server Components): Next.js 默认使用服务端组件。这些组件在服务端运行，无需客户端 JavaScript 即可渲染，因此不会增加客户端 JavaScript 包的大小。您可以根据需要使用客户端组件 (Client Components) 来实现交互功能。
- 代码分割 (Code-splitting): 服务端组件支持按路由段自动进行代码分割。您还可以考虑在适当场景下懒加载 (lazy loading) 客户端组件和第三方库。
- 预取 (Prefetching): 当用户视图中出现新路由链接时，Next.js 会在后台预取该路由，实现近乎即时的导航体验。您可以在必要时选择禁用预取功能。
- 静态渲染 (Static Rendering): Next.js 在构建时会在服务端静态渲染服务端和客户端组件，并缓存渲染结果以提升性能。您可以为特定路由选择启用动态渲染 (Dynamic Rendering)。
- 缓存 (Caching): Next.js 会缓存数据请求、服务端和客户端组件的渲染结果、静态资源等，以减少对服务器、数据库和后端服务的网络请求。您可以在必要时选择退出缓存机制。
这些默认优化旨在提升应用性能，减少每次网络请求传输的数据量和成本。
开发阶段
在构建应用时，我们建议使用以下功能来确保最佳性能和用户体验：
路由与渲染
- 布局 (Layouts): 使用布局在页面间共享UI，并启用导航时的部分渲染 (partial rendering)。
<Link>组件: 使用<Link>组件实现客户端导航和预取。- 错误处理 (Error Handling): 通过创建自定义错误页面，优雅处理生产环境的全局错误和404错误。
- 客户端与服务端组件: 遵循服务端与客户端组件的推荐组合模式，检查
"use client"边界的放置位置，避免不必要地增加客户端JavaScript包大小。 - 动态API: 注意如
cookies和searchParams等动态API会使整个路由进入动态渲染模式（如果在根布局中使用则会影响整个应用）。确保动态API的使用是经过深思熟虑的，并在适当时用<Suspense>边界包裹它们。
须知: 部分预渲染 (Partial Prerendering)（实验性功能）将允许路由部分内容保持动态，而无需使整个路由进入动态渲染模式。
数据获取与缓存
- 服务端组件: 充分利用服务端组件在服务端获取数据的优势。
- 路由处理器 (Route Handlers): 使用路由处理器从客户端组件访问后端资源。但不要从服务端组件调用路由处理器，以避免额外的服务端请求。
- 流式传输 (Streaming): 使用加载UI和React Suspense逐步将UI从服务端发送到客户端，防止数据获取时阻塞整个路由。
- 并行数据获取 (Parallel Data Fetching): 在适当时通过并行获取数据减少网络瀑布流。同时考虑在适当时预加载数据。
- 数据缓存 (Data Caching): 验证数据请求是否被缓存，并在适当时启用缓存。确保未使用
fetch的请求也能被缓存。 - 静态图片: 使用
public目录自动缓存应用的静态资源（如图片）。
UI与可访问性
- 表单与验证: 使用服务端操作 (Server Actions) 处理表单提交、服务端验证和错误处理。
- 字体模块: 使用字体模块优化字体，自动托管字体文件与其他静态资源，消除外部网络请求，减少布局偏移 (layout shift)。
<Image>组件: 使用图片组件优化图片，自动优化图片、防止布局偏移，并提供WebP等现代格式。<Script>组件: 使用脚本组件优化第三方脚本，自动延迟加载脚本，防止阻塞主线程。- ESLint: 使用内置的
eslint-plugin-jsx-a11y插件及早发现可访问性问题。
安全性
- 数据污染防护 (Tainting): 通过标记数据对象或特定值，防止敏感数据暴露给客户端。
- 服务端操作 (Server Actions): 确保用户有权调用服务端操作。查阅推荐的安全实践。
- 环境变量: 确保
.env.*文件已添加到.gitignore，且只有公共变量才添加NEXT_PUBLIC_前缀。 - 内容安全策略 (Content Security Policy): 考虑添加内容安全策略，保护应用免受跨站脚本、点击劫持等代码注入攻击。
元数据与SEO
- 元数据API: 使用元数据API通过添加页面标题、描述等提升应用的搜索引擎优化(SEO)。
- Open Graph (OG)图片: 创建OG图片为社交分享做好准备。
- 站点地图 (Sitemaps)和robots文件: 通过生成站点地图和robots文件帮助搜索引擎抓取和索引页面。
类型安全
- TypeScript和TS插件: 使用TypeScript和TypeScript插件获得更好的类型安全，帮助及早发现错误。
上线前准备
在上线前，您可以运行next build在本地构建应用并捕获构建错误，然后运行next start测量应用在生产环境下的性能表现。
核心Web指标
- Lighthouse: 在隐身模式下运行Lighthouse，更好地理解用户体验并发现改进点。这是模拟测试，应与实际数据（如核心Web指标）结合分析。
useReportWebVitals钩子: 使用此钩子向分析工具发送核心Web指标数据。
包分析
使用@next/bundle-analyzer插件分析JavaScript包大小，识别可能影响性能的大型模块和依赖项。
此外，以下工具可帮助您了解添加新依赖对应用的影响：