Next.js 16.4

# Next.js 16.4 来源：https://nextjs.org/blog/next-16-4 在 16.x 系列版本中，我们引入了一种全新的编程模型，旨在解决自 App Router 推出以来你们遇到的诸多痛点： - 它带来快速的初始加载，即使是个性化页面也是如此 - 它让服务端渲染的应用拥有即时的客户端导航体验 - 它将缓存改为可选、声明式且可组合的模式 这个新的编程模型叫做 **Cache Components**，它将成为 Next.js 17 的默认模式。在此版本发布之前，我们并未全面推荐它，因为在某些场景下，它无法达到与旧模型相同的成本和性能保证。本次发布包含了一系列关键特性，填补了这些差距。 **从 Next.js 16.4 开始，我们很高兴地向大家推荐 Cache Components 作为所有 Next.js 应用的最佳选择。** 从今天起，使用 `create-next-app` 创建的所有新应用都将默认启用 Cache Components。全新项目可以毫无保留地享受新模型的所有优势。 对于现有应用，我们一直在投入更好的 agentic 工具来帮助代码库迁移到新模型。新的 `next upgrade --agent` 命令为 agent 提供针对特定版本的升级指导，而专门的 Skills 则帮助 agent 完成采用 Cache Components 所需的任何重构工作。 Next.js 16.4 还包含多项开箱即用的改进，适用于所有 Next.js 应用，包括开发环境下更少的内存占用和磁盘占用、更短的编译时间、更小的生产环境构建产物，以及 React 19.3。 以下是本次发布的完整概览，先从 Cache Components 开始。 ## 什么是 Cache Components？ Cache Components 是一套功能，让你可以将组件树中的特定部分标记为可缓存。可以把 `'use cache'` 想象成组件级别的 Cache-Control HTTP 头：Next.js 在渲染页面时会解析这些 `'use cache'` 标注，将组件的 UI 缓存在浏览器中（在客户端导航期间），也可以选择性地缓存在服务端（在服务端渲染期间，或在构建阶段提前生成）。 这些可组合的标注让你可以在单个页面中混合使用客户端缓存、完全可插拔的服务端缓存以及请求时渲染，取代了之前 App Router 版本中隐式的缓存行为。 想了解更多 Cache Components 的信息，请阅读[缓存指南](https://nextjs.org/docs/app/getting-started/caching)。 ## Cache Components 的新特性 在本文中，我们用 "Cache Components" 来指代新的编程模型，你现在只需在 Next.js 配置中启用两个标志即可使用。 Cache Components 最初发布时未包含 Partial Prefetching，但现在它已被视为该模型的一部分。你可以从[之前的版本发布文章](https://nextjs.org/blog/next-16-3-instant-navigations#rethinking-prefetching)中了解更多关于 Partial Prefetching 的信息。 接下来，看看 16.4 中 Cache Components 的新特性。 ### 确保 shell、prefetch 或页面为静态 `'use cache'` 的标志性特性之一是能够构建将静态和动态内容在同一个服务端响应中流式传输的页面。例如，你可以将当前用户的头像与一篇静态预渲染的博客文章组合在一起： Next.js 可以从缓存中提供预渲染的博客文章（就像你的应用的 `/public` 文件夹或 CDN 一样），同时在请求时渲染 UserAvatar，全部来自同一个 HTTP 响应。正是这种灵活性让你能够构建具有复杂 UI 的应用，而无需在速度或动态性上做妥协。 但有时你*想要*构建一个完全静态页面的应用。在这种情况下，一个动态组件就可能降低原本已优化站点的性能或成本表现。 在 Next.js 16.4 中，`ensureStatic` 提供了一种简单的方式来保证某个路由的 shell、prefetch 或完整导航是静态的。对于希望避免意外计算、降低服务端成本的应用，这可以防止动态组件意外混入路由中。 例如，如果我们要强制上例中的博客文章页面始终保持静态，且永远不会添加像 UserAvatar 这样的动态组件，我们可以为该路由添加 `export const ensureStatic`： 将 `ensureStatic` 设置为 `"navigation"` 后，如果页面中包含任何动态内容，Next.js 将使构建失败，从而确保导航到该路由时永远不会在请求时渲染。 虽然 `"navigation"` 是最严格的表单，但如果你需要更细粒度的控制，也可以将 `ensureStatic` 设置为 `"prefetch"`（确保带有显式 prefetch 到此路由的链接只获取静态内容）或 `"shell"`（确保该路由首次被发现时只获取静态内容）。 除了在单个页面上使用外，你还可以将 `ensureStatic` 添加到 layout 上，对其中的所有页面应用相同的保证。例如，你可以在根 layout 上添加 `ensureStatic = 'navigation'`，轻松保证站点中每个页面导航都是静态的： 然后，如果某些页面开始需要动态内容，你可以将其下推到嵌套 layout 中。 许多动态应用不需要此功能，但对于电商店铺、营销页面或博客等优化站点，`ensureStatic` 是防止非预期请求时渲染的简单方式。 了解更多关于[保持页面静态](https://nextjs.org/docs/app/guides/keeping-pages-static)和 [`ensureStatic` 配置](https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config/ensureStatic)的信息。 ### 从 prefetch 中排除内容 Prefetching 是提升 Next.js 应用用户体验的强大方式。通过使用 `<Link prefetch>` 或 `useRouter().prefetch()`，你可以在实际导航发生之前预渲染页面的缓存 UI，从而消除加载状态。 例如，看一个简单的邮件应用。这里有一个收件箱，渲染了每封邮件的链接： 这里是 Message 页面，它在首次加载邮件会话时显示一个加载指示器，然后在浏览器中缓存以便后续访问： 虽然这让用户可以即时查看已加载的邮件，但首次打开邮件时仍然会看到加载指示器。 为了消除这个初始加载状态，我们可以为收件箱的链接添加 `prefetch`： 现在，每个链接在变为可见时就会预取 Message 页面上的所有缓存数据和 UI，等用户点击时就已经准备好了。这消除了应用中的加载状态，带来了很好的用户体验，但也意味着每个可见的链接都会提前加载*整个*邮件会话——即使是用户永远不会打开的邮件。 对于邮件应用来说，这可能成本太高或给服务端带来太大压力。更好的解决方案不是直接关闭 prefetch，而是只预取第一封邮件，其余会话的渲染延迟到用户实际导航时。 在 Next.js 16.4 中，我们完全可以做到这一点。新的 `navigation` API 让你在 prefetch 期间排除加载缓存内容，有效地将其推迟到实际导航发生时。 在我们的示例中，我们可以将会话提取为一个新组件，并添加 `await navigation()` 将其从 prefetch 中排除： 现在 Message 页面在 prefetch 期间只渲染第一封邮件，并等待完整导航时再从数据库加载其余会话并渲染。 除了 `navigation()`，我们还添加了 `prefetch()`，你可以在 await 时排除原本会被包含在路由 shell 中的缓存内容。这样，渲染这些内容将被推迟到通过 `<Link>` 或 `useRouter().prefetch()` 进行显式 prefetch 时。 这些 API 让你更好地控制在导航不同阶段加载哪些数据，帮助你在急切渲染和延迟渲染之间找到适合你应用的平衡点。 了解更多关于[将工作推迟到后续阶段](https://nextjs.org/docs/app/guides/optimizing-prefetching#defer-work-to-a-later-stage)的信息，并参阅 [`navigation`](https://nextjs.org/docs/app/api-reference/functions/navigation) 和 [`prefetch`](https://nextjs.org/docs/app/api-reference/functions/prefetch) API 参考。 ## 新的 Agent 功能 我们正在投入 Agent 工具的建设，让 Next.js 成为一个持续帮助你保持应用安全和最新的系统。Next.js 16.4 在我们的文档、Skills 和验证工具的基础上，新增了 agent 升级和反馈功能，帮助我们从你的构建方式中学习，并将改进反馈到你的应用中。 ### Agent 升级 新的 `next upgrade` 的 `--agent` 选项帮助你的 agent 从头到尾完成应用升级。它检查你安装的版本，选择目标版本，并为你的 agent 准备迁移指南、所需的 codemod 以及验证步骤。Agent 会应用更新、解决迁移问题，并检查你的应用是否仍然正常工作。 你可以或你的 agent 从应用目录中运行它： 使用 `next@canary` 可以运行最新的升级工具，即使你的应用使用的是较旧版本的 Next.js。你的 agent 会获得最新的指导，将你的应用升级到最新版本。 保持最新是第一步。为了帮助你保持更新，Next.js 16.4 引入了 `experimental.agentUpgrade`。当你或你的 agent 运行 `next dev` 或 `next build` 时，Next.js 会在有相关升级可用时自动提醒你或你的 agent，无需你自行记得检查。当你选择升级时，它会按照你配置的策略启动相同的 agent 工作流。 你可以在 Next.js 配置中配置这些提醒： - **`'security'`（默认策略）：** 提醒你有关修复已安装版本中已知漏洞的升级。 - **`'latest'`：** 提醒你有关新的主版本或次版本发布，并使用 `latest` 升级策略保持你的应用最新。 - **`false`：** 禁用升级提醒。 我们还在为该标志开发未来的策略，帮助 agent 以惯用方式采用新特性和编程模型变更，例如迁移到 Cache Components。 目前，你可以使用我们的 [Cache Components 采用 Skills](https://nextjs.org/docs/app/guides/ai-agents#next-cache-components-adoption) 和 [Partial Prefetching 采用 Skills](https://nextjs.org/docs/app/guides/ai-agents#next-partial-prefetching-adoption)，让你的 agent 帮助你迁移到新模型。 了解更多关于[使用编码 agent 进行升级](https://nextjs.org/docs/app/guides/upgrading/agent-upgrade)和 [`agentUpgrade` 配置](https://nextjs.org/docs/app/api-reference/config/next-config-js/agentUpgrade)的信息。 ### Agent 反馈 编码 agent 在构建和升级应用时经常遇到框架错误、不清晰的文档或临时解决方案。新的实验性 agent 反馈工作流让它们可以准备草稿报告，由你审阅后选择是否发送给 Next.js 团队。 当你使用推荐的 `create-next-app` 设置创建新应用时，Agent 反馈默认启用。对于现有应用，你可以通过 Next.js 配置选择启用： 启用后，`next dev` 会向你的 agent 添加指令，在工作过程中收集潜在问题。任务完成后，agent 会准备报告草稿并在你的浏览器中打开以供审阅。Agent 被指示省略源代码、日志、密钥和项目特定的详细信息。你可以编辑或丢弃每份报告，在你选择**发送反馈**之前不会发送任何内容。 Agent 反馈需要启用 Next.js Telemetry，且不会在 CI 中运行。 了解更多关于[agent 反馈](https://nextjs.org/docs/app/guides/ai-agents#automatic-agent-feedback)和 [`agentFeedback` 配置](https://nextjs.org/docs/app/api-reference/config/next-config-js/agentFeedback)的信息。 ## 面向所有应用的改进 ### 更小的磁盘缓存大小 在 16.4 中，Turbopack 的磁盘缓存节省了 20-25% 的空间，无需任何配置变更。缓存现在对占用最多空间的数据使用 Zstandard 压缩，同时保留 LZ4 用于元数据以保持快速的缓存查找。我们还改进了压缩整理例程，更高效地清理过期数据。 ### 惰性服务器 HMR 之前，修改一个共享的服务端模块可能会触发对开发会话中之前访问过的页面的更新，即使你已经不再查看它们。在 16.4 中，Turbopack 仅在请求需要时才编译和应用服务端更新。你正在查看的页面在编辑时仍然会更新，而其他路由则等到再次被请求时才更新。这减少了在应用中导航时不必要的后台工作。 ### Turbopack 共享运行时 Turbopack 现在将其运行时打包为一个跨路由共享的单个 chunk。这减少了下载大小并提高了缓存命中率。 阅读我们的[关于 chunking 的博客](https://nextjs.org/blog/turbopack-chunking)以了解更多关于此功能和其他 chunking 特性的信息。 ### 更小的生产环境构建产物 在 16.4 中，Turbopack 在生产环境中生成更短的 CSS Module 类名，减少样式表以及引用它们的 HTML 和 JavaScript 的大小。开发环境保留较长的类名以便于调试。 此外，Turbopack 现在使用 export mangling，通过缩短用于连接模块的内部 JavaScript 导出名称来进一步减小构建产物大小。 ### React 19.3 Next.js 16.4 随附 React 19.3，带来稳定的 View Transitions 和 Fragment Refs、新的 `browser()` API 等。 阅读 [React 19.3 公告](https://react.dev/blog/2026/09/09/react-19-3)以全面了解新特性。 ## 新的实验性功能 ### Rust React Compiler React Compiler 自动优化组件渲染，减少手动 memoization 的需求。其在 16.3 引入的实验性 Rust 版本直接在 Next.js 中运行，而非通过 Babel。 在 16.4 中，新增的快速检查让它可以跳过不需要优化的文件。它还避免在为服务端渲染构建 Client Component 时重复这些优化，减少了编译应用所需的工作。 16.4 还包含大量编译器更新，提升了性能和正确性。Turbopack 团队贡献的内存分配变更将 React Compiler 的内存使用减少了 30%，编译时间减少了 15%。 在 Next.js 配置中启用 React Compiler 并选择使用 Rust 版本： 了解更多关于 [Rust React Compiler](https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackRustReactCompiler) 和[编译器性能改进](https://github.com/vercel/next.js/pull/96820)的信息。 ### 磁盘缓存清理 当你编辑应用时，Next.js 可能会保留不再需要的缓存编译工作。在 16.4 中，一个实验性垃圾收集器会从内存和磁盘缓存中移除这些未使用的工作，帮助减少长时间开发会话中的资源使用。它还可以回收之前会话中的过期数据，例如你已删除的路由的缓存工作。 在 Next.js 配置中启用垃圾收集： 了解更多关于 `turbopackGc` 的信息（https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackGc）。 ### 惰性动态导入 动态导入让你可以延迟加载代码，但 Next.js 通常在开发期间提前编译这些代码。在 16.4 中，你可以选择仅在浏览器请求时才编译客户端动态导入。这减少了你尚未使用的代码的初始编译工作，例如在按钮点击后通过 `import()` 加载的库。 在 Next.js 配置中启用惰性动态导入： 部分 `next/dynamic` 导入仍然会被提前编译。了解更多关于 `turbopackLazyDynamicImports` 的信息（https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackLazyDynamicImports）。 ### Worker 线程 Turbopack 在单独的 Node.js 进程中运行 Babel、PostCSS 和 webpack loader 等工具，通过 socket 与其通信。使用 w