在将您的 Next.js 应用投入生产之前，您应该考虑实施一些优化和模式，以实现最佳的用户体验、性能和安全性。
本页面提供了最佳实践，您可以在 构建应用时 和 投入生产之前 参考，同时还会介绍您应该了解的 Next.js 自动优化。
自动优化
以下 Next.js 优化默认启用，无需配置：
App Router Only
- 服务器组件: Next.js 默认使用服务器组件。服务器组件在服务器上运行，无需 JavaScript 即可在客户端渲染。因此，它们对客户端 JavaScript 包的大小没有影响。您可以根据需要使用 客户端组件 来实现交互性。
- 代码分割: 服务器组件通过路由段实现自动代码分割。您也可以在适当的时候考虑 惰性加载 客户端组件和第三方库。
- 预取: 当新路由的链接进入用户视口时，Next.js 会在后台预取该路由。这使得导航到新路由几乎是即时的。您可以在适当的时候选择退出预取。
- 静态渲染: Next.js 在构建时在服务器上静态渲染服务器和客户端组件，并缓存渲染结果以提高应用程序的性能。您可以在适当的时候为特定路由选择 动态渲染。
- 缓存: Next.js 缓存数据请求、服务器和客户端组件的渲染结果、静态资产等，以减少对您的服务器、数据库和后端服务的网络请求数量。您可以在适当的时候选择退出缓存。
Pages Router Only
- 代码分割: Next.js 自动按页面对您的应用代码进行代码分割。这意味着在导航时只加载当前页面所需的代码。您也可以在适当的时候考虑 惰性加载 第三方库。
- 预取: 当新路由的链接进入用户视口时，Next.js 会在后台预取该路由。这使得导航到新路由几乎是即时的。您可以在适当的时候选择退出预取。
- 自动静态优化: 如果页面没有阻塞数据需求，Next.js 会自动判断该页面是静态的（可以预渲染）。优化后的页面可以被缓存，并从多个 CDN 位置提供给最终用户。您可以在适当的时候选择 服务器端渲染。
这些默认设置旨在提高您的应用程序性能，并降低每次网络请求的成本和传输数据量。
开发期间
在构建您的应用程序时，我们建议使用以下功能，以确保最佳性能和用户体验：
路由和渲染
App Router Only
须知： 部分预渲染（实验性） 将允许路由的部分内容是动态的，而无需将整个路由选择为动态渲染。
数据获取和缓存
App Router Only
- 服务器组件: 利用服务器组件在服务器上获取数据的好处。
- 路由处理程序: 使用路由处理程序从客户端组件访问您的后端资源。但不要从服务器组件调用路由处理程序，以避免额外的服务器请求。
- 流式传输: 使用加载 UI 和 React Suspense 逐步将 UI 从服务器发送到客户端，并防止在数据获取期间整个路由阻塞。
- 并行数据获取: 在适当的时候通过并行获取数据来减少网络瀑布。此外，在适当的时候考虑 预加载数据。
- 数据缓存: 验证您的数据请求是否被缓存，并在适当的时候选择缓存。确保不使用
fetch 的请求被 缓存。
- 静态图片: 使用
public 目录自动缓存应用程序的静态资产，例如图片。
Pages Router Only
- API 路由: 使用路由处理程序访问您的后端资源，并防止敏感秘密暴露给客户端。
- 数据缓存: 验证您的数据请求是否被缓存，并在适当的时候选择缓存。确保不使用
getStaticProps 的请求在适当的时候被缓存。
- 增量静态再生: 使用增量静态再生在页面构建后更新静态页面，而无需重建整个网站。
- 静态图片: 使用
public 目录自动缓存应用程序的静态资产，例如图片。
UI 和可访问性
App Router Only
- 表单和验证: 使用服务器 Actions 处理表单提交、服务器端验证和错误处理。
- 全局错误 UI: 添加
app/global-error.tsx，为您的应用中所有未捕获的错误提供一致、可访问的备用 UI 和恢复机制。
- 全局 404: 添加
app/global-not-found.tsx，为您的应用中所有不匹配的路由提供可访问的 404 页面。
- 字体模块: 通过使用字体模块优化字体，该模块会自动将您的字体文件与其他静态资产一起托管，消除外部网络请求，并减少 布局偏移。
<Image> 组件: 通过使用 Image 组件优化图片，该组件会自动优化图片，防止布局偏移，并以 WebP 等现代格式提供图片。<Script> 组件: 通过使用 Script 组件优化第三方脚本，该组件会自动延迟脚本并防止它们阻塞主线程。- ESLint: 使用内置的
eslint-plugin-jsx-a11y 插件提早发现可访问性问题。
安全
- 环境变量: 确保您的
.env.* 文件已添加到 .gitignore 中，并且只有公共变量以 NEXT_PUBLIC_ 为前缀。
- 内容安全策略: 考虑添加内容安全策略，以保护您的应用程序免受各种安全威胁，例如跨站脚本、点击劫持和其他代码注入攻击。
元数据和 SEO
类型安全
- TypeScript 和 TS 插件: 使用 TypeScript 和 TypeScript 插件以获得更好的类型安全，并帮助您及早发现错误。
投入生产之前
在投入生产之前，您可以运行 next build 在本地构建您的应用程序并捕获任何构建错误，然后运行 next start 在类似生产的环境中衡量您的应用程序的性能。
核心 Web 指标
- Lighthouse: 在无痕模式下运行 Lighthouse，以更好地了解用户将如何体验您的网站，并确定需要改进的领域。这是一个模拟测试，应与查看实际数据（例如核心 Web 指标）结合使用。
分析捆绑包
使用 @next/bundle-analyzer 插件 分析您的 JavaScript 捆绑包大小，并识别可能影响应用程序性能的大型模块和依赖项。
此外，以下工具可以帮助您了解添加新依赖项对应用程序的影响：