生产环境检查清单

在将 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>组件: 使用该组件实现客户端导航和预获取 (client-side navigation and prefetching)。
错误处理 (Error Handling): 通过创建自定义错误页面优雅处理生产环境中的全局错误 (catch-all errors)和404错误。
组合模式 (Composition Patterns): 遵循服务端与客户端组件的推荐组合模式，检查"use client"边界的放置位置，避免不必要地增加客户端JavaScript包体积。
动态函数 (Dynamic Functions): 注意类似cookies()和searchParams这样的动态函数会使整个路由进入动态渲染 (Dynamic Rendering)模式（若在根布局 (Root Layout)中使用则会影响整个应用）。确保动态函数的使用是必要的，并在适当时用<Suspense>边界包裹它们。

须知: 部分预渲染 (Partial Prerendering)（实验性功能）将允许路由部分内容动态化而不影响整个路由的渲染模式。

服务端组件 (Server Components): 充分利用服务端组件在服务器端获取数据的优势。
路由处理器 (Route Handlers): 通过路由处理器让客户端组件访问后端资源。但不要从服务端组件调用路由处理器以避免额外的服务器请求。
流式渲染 (Streaming): 使用加载UI和React Suspense逐步从服务器向客户端发送UI，防止数据获取时阻塞整个路由。
并行数据获取 (Parallel Data Fetching): 在适当时通过并行获取数据减少网络瀑布流。也可考虑预加载数据 (preloading data)。
数据缓存 (Data Caching): 验证数据请求是否被缓存，并在适当时启用缓存。确保未使用fetch的请求也能被缓存。
静态资源 (Static Images): 使用public目录自动缓存应用的静态资源（如图片）。

字体模块 (Font Module): 通过字体模块优化字体，该功能会自动托管字体文件与其他静态资源，消除外部网络请求并减少布局偏移 (layout shift)。
<Image>组件: 使用图片组件自动优化图片，防止布局偏移，并提供WebP或AVIF等现代格式。
<Script>组件: 使用脚本组件优化第三方脚本，自动延迟加载并防止阻塞主线程。
ESLint: 使用内置的eslint-plugin-jsx-a11y插件及早发现可访问性问题。

环境变量 (Environment Variables): 确保.env.*文件已加入.gitignore，且只有公开变量以NEXT_PUBLIC_为前缀。
内容安全策略 (Content Security Policy): 考虑添加内容安全策略以防范跨站脚本、点击劫持等代码注入攻击。