Next.js 16.4

Next.js 16.4

💡 原文英文,约3400词,阅读约需13分钟。
📝

内容提要

Next.js 16.4 发布,核心是推荐 Cache Components 编程模型,通过 'use cache' 实现组件级缓存,兼顾静态与动态内容。新增 ensureStatic 保证页面静态,并提供 navigation/prefetch API 控制预取内容。同时升级 AI 代理与反馈工具,优化 Turbopack 缓存、编译速度和产物体积,并升级至 React 19.3。

🔎

延伸解读

Cache Components 成为推荐默认的考量

Next.js 16.4 开始推荐所有应用使用 Cache Components,并将在 17 中成为默认。此前未全面推荐是因为某些场景下无法达到旧模型的成本与性能保证,本次发布补齐了这些缺口。新项目通过 create-next-app 默认启用,现有项目可借助 next upgrade --agent 和 Skills 迁移。

ensureStatic 对静态站点的成本控制价值

对于电商、营销页或博客等追求静态优化的站点,一个动态组件可能意外增加请求时渲染,推高服务器成本。ensureStatic 可设为 navigation、prefetch 或 shell,在构建时强制检查并失败,防止动态内容混入。也可在布局中全局应用,再按需下推。

navigation 与 prefetch API 的预取取舍

预取能消除加载状态,但可能提前加载用户不会访问的内容,增加服务器压力。新增的 navigation() 和 prefetch() 允许在预取阶段排除部分缓存内容,将其推迟到实际导航或显式预取时再渲染。这为平衡即时体验与资源消耗提供了更细粒度的控制。

面向所有应用的底层优化

16.4 为所有 Next.js 应用带来多项改进:Turbopack 磁盘缓存体积减少 20–25%,采用 Zstandard 压缩;懒服务端 HMR 减少无关页面更新;共享运行时降低下载量;生产环境缩短 CSS Module 类名和导出名以减小包体。同时升级至 React 19.3,带来稳定版 View Transitions 等特性。

❓

Q&A

Next.js 16.4 中 Cache Components 是什么?

Cache Components 是 Next.js 16.4 引入的新编程模型,通过 'use cache' 指令实现组件级缓存,让开发者可以标记组件树中特定部分为可缓存,从而兼顾静态和动态内容,实现快速初始加载和即时客户端导航。

如何在 Next.js 16.4 中确保页面完全静态?

可以使用 ensureStatic 配置。在页面或布局中导出 ensureStatic 并设置为 'navigation'、'prefetch' 或 'shell',例如 export const ensureStatic = 'navigation',这样如果页面包含动态内容,构建将失败,从而保证路由的静态性。

Next.js 16.4 的 navigation 和 prefetch API 有什么作用?

navigation() 和 prefetch() API 用于控制预取内容。在组件中调用 await navigation() 可以排除该部分内容在预取时加载,延迟到实际导航时再渲染;await prefetch() 则排除内容在路由 shell 中的预取,延迟到显式预取时加载。

Next.js 16.4 为 AI 代理提供了哪些新功能?

新增 next upgrade --agent 命令,让代理自动升级应用;experimental.agentUpgrade 配置可在开发或构建时提醒升级;experimental.agentFeedback 允许代理收集问题并生成报告草稿供用户审核发送。

Next.js 16.4 在 Turbopack 方面有哪些改进?

Turbopack 磁盘缓存减少 20-25% 空间,使用 Zstandard 压缩;服务器 HMR 改为懒编译;共享运行时减少下载大小;生产包更小,通过缩短 CSS Module 类名和导出名混淆实现。

Next.js 16.4 升级了哪个 React 版本?带来了哪些新特性?

升级到 React 19.3,带来稳定的 View Transitions 和 Fragment Refs,以及新的 browser() API 等特性。

🏷️

标签

➡️

继续阅读