How to optimize your Next.js application for production
在将Next.js应用投入生产之前，有一些优化和模式你应该考虑实施，以获得最佳的用户体验、性能和安全性。
本页面提供了可作为参考的最佳实践，用于构建应用程序时和投入生产前，以及你应该了解的Next.js自动优化。
自动优化
这些Next.js优化默认启用，无需配置：
- Server Components： Next.js默认使用Server Components。Server Components在服务器上运行，不需要JavaScript在客户端渲染。因此，它们不会影响客户端JavaScript包的大小。你可以根据需要使用Client Components来实现交互性。
- 代码分割： Server Components通过路由段自动实现代码分割。在适当的情况下，你还可以考虑懒加载 Client Components和第三方库。
- 预取： 当指向新路由的链接进入用户视口时，Next.js会在后台预取该路由。这使得导航到新路由几乎是即时的。你可以在适当的情况下选择退出预取。
- 静态渲染： Next.js在构建时在服务器上静态渲染Server和Client Components，并缓存渲染结果以提高应用程序性能。你可以在适当的情况下为特定路由选择动态渲染。
- 缓存： Next.js缓存数据请求、Server和Client Components的渲染结果、静态资源等，以减少对服务器、数据库和后端服务的网络请求数量。你可以在适当的情况下选择退出缓存。
这些默认设置旨在提高应用程序的性能，并减少每次网络请求的成本和传输的数据量。
开发过程中
在构建应用程序时，我们建议使用以下功能以确保最佳性能和用户体验：
路由和渲染
- 布局： 使用布局在页面间共享UI并在导航时启用部分渲染。
<Link>组件： 使用<Link>组件进行客户端导航和预取。- 错误处理： 通过创建自定义错误页面，在生产环境中优雅地处理全局错误和404错误。
- 组合模式： 遵循Server和Client Components的推荐组合模式，并检查你的
"use client"边界的位置，以避免不必要地增加客户端JavaScript包的大小。 - 动态API： 请注意，像
cookies和searchParams属性这样的动态API会将整个路由选择为动态渲染（如果在根布局中使用，则整个应用程序都会选择动态渲染）。确保动态API的使用是有意的，并在适当的地方将它们包装在<Suspense>边界中。
值得注意的是：部分预渲染（实验性）将允许路由的部分内容是动态的，而不必将整个路由选择为动态渲染。
数据获取和缓存
- Server Components： 利用在服务器上使用Server Components获取数据的优势。
- 路由处理程序： 使用路由处理程序从Client Components访问后端资源。但不要从Server Components调用路由处理程序，以避免额外的服务器请求。
- 流式传输： 使用加载UI和React Suspense逐步从服务器向客户端发送UI，并防止整个路由在获取数据时被阻塞。
- 并行数据获取： 通过在适当的情况下并行获取数据，减少网络瀑布效应。另外，在适当的情况下考虑预加载数据。
- 数据缓存： 验证你的数据请求是否被缓存，并在适当的情况下选择缓存。确保不使用
fetch的请求也被缓存。 - 静态图像： 使用
public目录自动缓存应用程序的静态资源，例如图像。
UI和可访问性
- 表单和验证： 使用Server Actions处理表单提交、服务器端验证和处理错误。
- 字体模块： 通过使用字体模块优化字体，该模块自动将字体文件与其他静态资源一起托管，减少外部网络请求，并减少布局偏移。
<Image>组件： 通过使用Image组件优化图像，该组件自动优化图像，防止布局偏移，并以WebP等现代格式服务图像。<Script>组件： 通过使用Script组件优化第三方脚本，该组件自动延迟脚本并防止它们阻塞主线程。- ESLint： 使用内置的
eslint-plugin-jsx-a11y插件尽早捕获可访问性问题。
安全性
- 污点标记： 通过对数据对象和/或特定值进行污点标记，防止敏感数据暴露给客户端。
- Server Actions： 确保用户有权调用Server Actions。查看推荐的安全实践。
- 环境变量： 确保你的
.env.*文件添加到.gitignore中，并且只有公共变量以NEXT_PUBLIC_为前缀。 - 内容安全策略： 考虑添加内容安全策略，以保护你的应用程序免受跨站脚本、点击劫持和其他代码注入攻击等各种安全威胁。
元数据和SEO
- 元数据API： 使用元数据API通过添加页面标题、描述等来提高应用程序的搜索引擎优化（SEO）。
- Open Graph (OG) 图像： 创建OG图像，为社交分享准备应用程序。
- 网站地图和Robots： 通过生成网站地图和robots文件帮助搜索引擎爬取和索引你的页面。
类型安全
- TypeScript和TS插件： 使用TypeScript和TypeScript插件获得更好的类型安全性，并帮助你尽早发现错误。
投入生产前
在投入生产之前，你可以运行next build在本地构建应用程序并捕获任何构建错误，然后运行next start来测量应用程序在类生产环境中的性能。
核心Web指标
- Lighthouse： 在隐身模式下运行lighthouse，以更好地了解用户将如何体验你的网站，并确定需要改进的领域。这是一个模拟测试，应与查看现场数据（如核心Web指标）配合使用。
useReportWebVitals钩子： 使用此钩子将核心Web指标数据发送到分析工具。
分析包
使用@next/bundle-analyzer插件分析JavaScript包的大小，并确定可能影响应用程序性能的大型模块和依赖项。
此外，以下工具可以帮助你了解向应用程序添加新依赖项的影响：