用途
本指南是 Next.js 16 的综合参考,面向需要了解 Next.js 16 新特性、破坏性变更以及从 Next.js 15 迁移的开发者。适用于从零开始新建 Next.js 项目、从 v15 升级到 v16、理解 Cache Components 与部分预渲染(PPR)、配置 Turbopack、将 middleware.ts 迁移到 proxy.ts、使用 DevTools MCP 进行 AI 辅助调试,以及配置 React Compiler 实现自动记忆化等场景。
主要能力
Cache Components 与 "use cache"
Next.js 15 的隐式缓存难以预测,静态与动态切换不清晰。Next.js 16 改为显式缓存,在 next.config.ts 中设置 cacheComponents: true 启用。可在页面、组件或函数级别使用 'use cache' 指令控制缓存粒度,未标记的部分保持动态实时获取。适合内容混合静态与动态的 SaaS 仪表盘等场景。
Turbopack 默认打包器
Turbopack 在 Next.js 16 中成为默认且稳定的打包器,无需配置。官方基准显示生产构建快 2-5 倍,开发环境 Fast Refresh 最高快 10 倍,并支持文件系统缓存(Beta)。如需退回 Webpack 可使用 next build --webpack。
proxy.ts 替代 middleware.ts
网络层文件由 middleware.ts 改为 proxy.ts,导出方式由 export function middleware 改为 export default function proxy,运行环境从 Edge 改为 Node.js,边界更清晰、调试更标准。
DevTools MCP
集成 Model Context Protocol,使 AI 智能体可读取浏览器与服务器统一日志、理解路由与缓存规则、访问错误堆栈,提供页面感知的调试上下文,可与 Claude Code、Cursor 等 MCP 兼容工具配合使用。
React Compiler(稳定版)
从实验性转为稳定,可自动记忆化组件,减少手动 useMemo、useCallback、React.memo 的使用。需安装 babel-plugin-react-compiler@latest 并在配置中设置 reactCompiler: true。
使用方式
安装:npm install next@latest react@latest react-dom@latest。
在 next.config.ts 中启用特性:cacheComponents: true、reactCompiler: true,以及可选的 experimental.turbopackFileSystemCacheForDev: true。
迁移步骤:确认 Node.js 20.9+;运行 npx @next/codemod@canary upgrade latest 自动处理大部分变更;手动重命名 middleware.ts 为 proxy.ts 并修改导出;为 params、searchParams、cookies()、headers()、draftMode() 添加 await;为 revalidateTag() 补充 cacheLife 配置(如 'max'、'hours'、'days');执行 npm run build 与 npm run dev 验证;先部署到预发布环境。
适用场景
新建项目建议直接使用 Next.js 16;中小型代码库(少于 50 条路由)、使用 Vercel 平台、希望获得更快构建与即时导航的项目适合尽快升级。大型生产应用(超过 100 条路由)、大量使用 middleware.ts、自定义 Webpack 配置或第三方库尚未兼容的项目建议等待 1-2 周。使用 AMP 页面、仍停留在 Node.js 18 或依赖自定义构建管线的项目暂不建议升级。
限制
Next.js 16 要求 Node.js 20.9+,不再支持 Node.js 18 与 TypeScript 5.1 以下版本;AMP 支持已完全移除;next lint 命令已移除;params、searchParams、cookies()、headers()、draftMode() 均需改为异步调用;revalidateTag() 需提供 cacheLife 配置。