性能狂飙！Next.js 16 重磅发布：Turbopack 稳定、编译提速 10 倍！🚀🚀🚀

最近在使用 NestJs 和 NextJs 在做一个协同文档 DocFlow，如果感兴趣，欢迎 star，有任何疑问，欢迎加我微信进行咨询 yunmz777

Next.js 团队于 2025 年 10 月 21 日星期二，在即将举行的 Next.js Conf 2025 之前，正式发布了 Next.js 16。

此版本提供了对 Turbopack、缓存和 Next.js 架构的最新改进。自上一个 Beta 版本以来，Next.js 16 新增了以下功能和改进：

缓存组件（Cache Components）：使用局部预渲染（Partial Pre-Rendering, PPR）的新模型和 use cache 实现即时导航。
Next.js Devtools MCP：集成模型上下文协议（Model Context Protocol）以改进调试和工作流程。
代理（Proxy）： middleware 被 proxy.ts 替代，以明确网络边界。
开发体验（DX）：改进了构建和开发请求的日志记录。

此外，以下功能已在之前的 Beta 版本中提供：

Turbopack (稳定版)：所有应用程序的默认打包工具，Fast Refresh 速度提升 5-10 倍，构建速度提升 2-5 倍。
Turbopack 文件系统缓存 (Beta)：针对大型应用程序，启动和编译时间更快。
React Compiler 支持 (稳定版)：内置集成，用于自动记忆化（memoization）。
Build Adapters API (Alpha)：创建自定义适配器以修改构建过程。
增强路由：通过布局去重（layout deduplication）和增量预取（incremental prefetching）优化导航和预取。
改进的缓存 API：新增 updateTag() 和改进的 revalidateTag()。
React 19.2：视图转换（View Transitions）、useEffectEvent()、<Activity/>。
破坏性变更：异步参数、next/image 默认设置等。

升级到 Next.js 16：

用户可以通过以下方式升级到 Next.js 16：

bash 复制代码

# 使用自动升级 CLI
npx @next/codemod@canary upgrade latest
# ...或者手动升级
npm install next@latest react@latest react-dom@latest
# ...或者启动一个新项目
npx create-next-app@latest

对于 codemod 无法完全迁移代码的情况，请阅读升级指南。

新功能和改进

缓存组件（Cache Components）

缓存组件是一组新功能，旨在使 Next.js 中的缓存更加明确和灵活。它们围绕新的 "use cache" 指令展开，该指令可用于缓存页面、组件和函数，并利用编译器在使用时自动生成缓存键。

与以前版本的 App Router 中隐式缓存不同，缓存组件的缓存是完全可选加入的。任何页面、布局或 API 路由中的所有动态代码默认都在请求时执行，这使得 Next.js 的开箱即用体验更好地与开发人员对全栈应用框架的期望保持一致。

缓存组件也完善了局部预渲染（Partial Prerendering, PPR）的故事，PPR 最早于 2023 年引入。在 PPR 之前，Next.js 必须选择将每个 URL 静态渲染还是动态渲染，没有中间地带。PPR 消除了这种二分法，允许开发人员通过 Suspense 将静态页面的部分内容选择性地进行动态渲染，同时又不牺牲完全静态页面的快速初始加载。

用户可以在 next.config.ts 文件中启用缓存组件：

next.config.ts

typescript 复制代码

const nextConfig = {
  cacheComponents: true,
};
export default nextConfig;

Next.js 团队将在 2025 年 10 月 22 日的 Next.js Conf 2025 上分享更多关于缓存组件及其使用方法，并在未来几周内通过博客和文档分享更多内容。

注意：如 Beta 版本中先前宣布的那样，以前的实验性 experimental.ppr 标志和配置选项已被删除，转而使用缓存组件配置。

在此文档中了解更多信息。

Next.js Devtools MCP

Next.js 16 引入了 Next.js DevTools MCP，它是一个模型上下文协议（Model Context Protocol）集成，用于 AI 辅助调试，可提供对应用程序的上下文洞察。

Next.js DevTools MCP 为 AI 代理提供：

Next.js 知识：路由、缓存和渲染行为。
统一日志：无需切换上下文即可查看浏览器和服务器日志。
自动错误访问：无需手动复制即可获取详细堆栈跟踪。
页面感知：对活动路由的上下文理解。

这使得 AI 代理能够在开发工作流程中直接诊断问题、解释行为并建议修复方案。

在此文档中了解更多信息。

`proxy.ts` (原 `middleware.ts`)

proxy.ts 替换了 middleware.ts，并明确了应用程序的网络边界。proxy.ts 在 Node.js 运行时上运行。

迁移步骤：将 middleware.ts 重命名为 proxy.ts，并将导出的函数重命名为 proxy。逻辑保持不变。

原因：更清晰的命名和用于请求拦截的单一、可预测的运行时。

proxy.ts

typescript 复制代码

export default function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL("/home", request.url));
}

注意： middleware.ts 文件仍然可用于 Edge 运行时的用例，但它已被弃用，并将在未来版本中移除。

在此文档中了解更多信息。

日志改进

在 Next.js 16 中，开发请求日志得到了扩展，显示了时间花费在哪里：

Compile（编译）：路由和编译。
Render（渲染）：运行您的代码和 React 渲染。

构建日志也得到了扩展，显示了时间花费在哪个步骤。构建过程中的每一步现在都显示了完成所需的时间。

bash 复制代码

▲ Next.js 16 (Turbopack)
✓ Compiled successfully in 615ms
✓ Finished TypeScript in 1114ms
✓ Collecting page data in 208ms
✓ Generating static pages in 239ms
✓ Finalizing page optimization in 5ms

之前在 Beta 版本中宣布的功能：

开发者体验

Turbopack (稳定版)

Turbopack 的开发和生产构建均已达到稳定，现在是所有新 Next.js 项目的默认打包工具。自今年夏天早些时候发布 Beta 版以来，采用率迅速扩大：Next.js 15.3+ 上超过 50% 的开发会话和 20% 的生产构建已在使用 Turbopack。

使用 Turbopack，用户可以期待：

生产构建速度提升 2--5 倍
Fast Refresh 速度提升高达 10 倍

Next.js 团队将 Turbopack 设为默认配置，以便让每个 Next.js 开发人员都能获得这些性能提升，无需任何配置。对于使用自定义 webpack 设置的应用程序，用户仍然可以通过运行以下命令来继续使用 webpack：

bash 复制代码

next dev --webpack
next build --webpack

Turbopack 文件系统缓存 (Beta)

Turbopack 现在支持开发环境中的文件系统缓存，在两次运行之间将编译器工件存储在磁盘上，从而显著加快重启时的编译时间，尤其是在大型项目中。

在配置中启用文件系统缓存：

next.config.ts

typescript 复制代码

const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};
export default nextConfig;

所有 Vercel 内部应用都已在使用此功能，团队观察到大型仓库的开发人员生产力有了显著提升。

Next.js 团队欢迎用户尝试并分享关于文件系统缓存的反馈。

简化的 `create-next-app`

create-next-app 经过重新设计，具有简化的设置流程、更新的项目结构和改进的默认设置。新模板默认包含 App Router、TypeScript-优先配置、Tailwind CSS 和 ESLint。

Build Adapters API (Alpha)

继 Build Adapters RFC 之后，Next.js 团队与社区和部署平台合作，发布了 Build Adapters API 的第一个 Alpha 版本。

Build Adapters 允许用户创建自定义适配器，以挂钩到构建过程，使部署平台和自定义构建集成能够修改 Next.js 配置或处理构建输出。

next.config.js

javascript 复制代码

const nextConfig = {
  experimental: {
    adapterPath: require.resolve("./my-adapter.js"),
  },
};
module.exports = nextConfig;

用户可以在 RFC 讨论中分享您的反馈。

React Compiler 支持 (稳定版)

在 React Compiler 1.0 版本发布之后，Next.js 16 中对 React Compiler 的内置支持现已稳定。React Compiler 自动记忆化组件，减少不必要的重新渲染，无需手动更改代码。

reactCompiler 配置选项已从实验性升级为稳定版。它不是默认启用的，因为团队仍在收集不同应用类型的构建性能数据。请注意，启用此选项后，由于 React Compiler 依赖于 Babel，开发和构建期间的编译时间可能会更高。

next.config.ts

typescript 复制代码

const nextConfig = {
  reactCompiler: true,
};
export default nextConfig;

用户需要安装最新版本的 React Compiler 插件：

bash 复制代码

npm install babel-plugin-react-compiler@latest

核心功能与架构

增强路由和导航

Next.js 16 彻底改进了路由和导航系统，使页面过渡更精简、更快。

布局去重（Layout deduplication）：当预取多个具有共享布局的 URL 时，布局只下载一次，而不是为每个 Link 单独下载。例如，一个包含 50 个产品链接的页面现在只需下载一次共享布局，而不是 50 次，从而大大减少了网络传输大小。
增量预取（Incremental prefetching）： Next.js 只预取缓存中尚不存在的部分，而不是整个页面。预取缓存现在：
- 当链接离开视口时取消请求。
- 在悬停或重新进入视口时优先预取链接。
- 当其数据失效时重新预取链接。
- 与即将推出的功能（如缓存组件）无缝协作。

权衡：用户可能会看到更多的单个预取请求，但总传输大小会大大降低。Next.js 团队认为这对于几乎所有应用程序来说都是正确的权衡。如果请求数量增加导致问题，团队正在努力进行额外的优化，以更有效地内联数据块。

这些更改无需修改代码，旨在提高所有应用程序的性能。

改进的缓存 API

Next.js 16 引入了改进的缓存 API，以便更明确地控制缓存行为。

revalidateTag() (已更新)

revalidateTag() 现在需要一个 cacheLife 配置文件作为第二个参数，以启用陈旧时重新验证（stale-while-revalidate, SWR）行为：

javascript 复制代码

import { revalidateTag } from "next/cache";
// ✅ 使用内置的 cacheLife 配置文件（对于大多数情况，团队推荐 'max'）
revalidateTag("blog-posts", "max");
// 或者使用其他内置配置文件
revalidateTag("news-feed", "hours");
revalidateTag("analytics", "days");
// 或者使用带有自定义重新验证时间的内联对象
revalidateTag("products", { revalidate: 3600 });
// ⚠️ 已弃用 - 单参数形式
revalidateTag("blog-posts");

profile 参数接受内置的 cacheLife 配置文件名称（例如 'max'、'hours'、'days'）或在 next.config 中定义的自定义配置文件。用户也可以传递一个内联的 { expire: number } 对象。团队建议在大多数情况下使用 'max'，因为它为长寿命内容启用后台重新验证。当用户请求带标签的内容时，他们会立即收到缓存的数据，同时 Next.js 在后台进行重新验证。

当用户只想使带有 SWR 行为的正确标记的缓存条目失效时，请使用 revalidateTag()。这对于可以容忍最终一致性的静态内容来说是理想的选择。

迁移指南：添加带有 cacheLife 配置文件（推荐 'max'）的第二个参数以实现 SWR 行为，或者如果需要读后写语义，请在 Server Actions 中使用 updateTag()。

updateTag() (新增)

updateTag() 是一个新的仅限 Server Actions 的 API，它提供读后写语义，在同一请求中使缓存失效并立即读取新鲜数据：

javascript 复制代码

"use server";
import { updateTag } from "next/cache";
export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);
  // 使缓存失效并立即刷新 - 用户会立即看到他们的更改
  updateTag(`user-${userId}`);
}

这确保了交互式功能立即反映更改。非常适合表单、用户设置以及用户期望立即看到其更新的任何工作流程。

refresh() (新增)

refresh() 是一个新的仅限 Server Actions 的 API，用于仅刷新未缓存的数据。它根本不触及缓存：

javascript 复制代码

"use server";
import { refresh } from "next/cache";
export async function markNotificationAsRead(notificationId: string) {
  // 更新数据库中的通知
  await db.notifications.markAsRead(notificationId);
  // 刷新标题中显示的通知计数
  // (这是单独获取且未缓存的)
  refresh();
}

此 API 是客户端 router.refresh() 的补充。当用户在执行操作后需要刷新页面其他位置显示的未缓存数据时，请使用它。您的缓存页面外壳和静态内容保持快速，而动态数据（如通知计数、实时指标或状态指示器）则会刷新。

React 19.2 和 Canary 功能

Next.js 16 中的 App Router 使用最新的 React Canary 版本，其中包括新发布的 React 19.2 功能和正在逐步稳定的其他功能。亮点包括：

View Transitions（视图转换）：对在 Transition 或导航内部更新的元素进行动画处理。
useEffectEvent：将非反应式逻辑从 Effects 中提取到可重用的 Effect Event 函数中。
Activity：渲染"后台活动"，通过 display: none 隐藏 UI，同时保持状态并清理 Effects。

在 React 19.2 公告中了解更多信息。

破坏性变更和其他更新

版本要求

变更	详细信息
Node.js 20.9+	最低版本现为 20.9.0 (LTS)；不再支持 Node.js 18。
TypeScript 5+	最低版本现为 5.1.0。
浏览器	Chrome 111+、Edge 111+、Firefox 111+、Safari 16.4+。

移除项

以下功能先前已被弃用，现已移除：

移除项	替换项
AMP 支持	所有 AMP API 和配置已移除 (`useAmp`, `export const config = { amp: true }`)。
`next lint` 命令	直接使用 Biome 或 ESLint；`next build` 不再运行 linting。提供了 codemod：`npx @next/codemod@canary next-lint-to-eslint-cli`。
`devIndicators` 选项	`appIsrStatus`、`buildActivity`、`buildActivityPosition` 已从配置中移除。指示器仍然存在。
`serverRuntimeConfig`、`publicRuntimeConfig`	使用环境变量 (`.env` 文件)。
`experimental.turbopack` 位置	配置已移至顶层 `turbopack` (不再位于 `experimental` 中)。
`experimental.dynamicIO` 标志	重命名为 `cacheComponents`。
`experimental.ppr` 标志	PPR 标志已移除；演变为缓存组件编程模型。
`export const experimental_ppr`	路由级别 PPR 导出已移除；演变为缓存组件编程模型。
自动 `scroll-behavior: smooth`	将 `data-scroll-behavior="smooth"` 添加到 HTML 文档以重新选择加入。
`unstable_rootParams()`	团队正在开发替代 API，将在即将发布的次要版本中推出。
同步 `params`、`searchParams` props 访问	必须使用异步：`await params`、`await searchParams`。
同步 `cookies()`、`headers()`、`draftMode()` 访问	必须使用异步：`await cookies()`、`await headers()`、`await draftMode()`。
Metadata image 路由 `params` 参数	更改为异步 `params`；`generateImageMetadata` 中的 `id` 现在是 `Promise<string>`。
`next/image` 带有查询字符串的本地 `src`	现在需要 `images.localPatterns` 配置以防止枚举攻击。

行为变更

以下功能在 Next.js 16 中具有新的默认行为：

变更行为	详细信息
默认打包工具	Turbopack 现在是所有应用的默认打包工具；使用 `next build --webpack` 退出。
`images.minimumCacheTTL` 默认值	从 60 秒更改为 4 小时 (14400 秒)；减少了没有 `cache-control` 头的图片的重新验证成本。
`images.imageSizes` 默认值	从默认尺寸中移除了 16 (仅被 4.2% 的项目使用)；减少了 `srcset` 大小和 API 变化。
`images.qualities` 默认值	从 `[1..100]` 更改为 `[75]`；`quality` 属性现在被强制转换为 `images.qualities` 中最接近的值。
`images.dangerouslyAllowLocalIP`	新的安全限制默认阻止本地 IP 优化；仅对私有网络设置为 `true`。
`images.maximumRedirects` 默认值	从无限制更改为最多 3 个重定向；设置为 0 以禁用或增加以应对罕见边缘情况。
`@next/eslint-plugin-next` 默认值	现在默认使用 ESLint Flat Config 格式，与将放弃旧版配置支持的 ESLint v10 对齐。
预取缓存行为	完全重写，具有布局去重和增量预取。
`revalidateTag()` 签名	现在需要 `cacheLife` 配置文件作为第二个参数以实现陈旧时重新验证行为。
Turbopack 中的 Babel 配置	如果找到 babel 配置，则自动启用 Babel (以前会以硬错误退出)。
终端输出	重新设计，具有更清晰的格式、更好的错误消息和改进的性能指标。
开发和构建输出目录	`next dev` 和 `next build` 现在使用单独的输出目录，从而可以并行执行。
锁文件行为	添加了锁文件机制，以防止同一项目上出现多个 `next dev` 或 `next build` 实例。
并行路由 `default.js`	所有并行路由槽现在都需要明确的 `default.js` 文件；没有它们构建将失败。创建调用 `notFound()` 或返回 `null` 的 `default.js` 以获得以前的行为。
Modern Sass API	将 `sass-loader` 提升到 v16，支持现代 Sass 语法和新功能。

弃用项

以下功能在 Next.js 16 中已弃用，并将在未来版本中移除：

弃用项	详细信息
`middleware.ts` 文件名	重命名为 `proxy.ts` 以阐明网络边界和路由焦点。
`next/legacy/image` 组件	改用 `next/image` 以获得改进的性能和功能。
`images.domains` 配置	改用 `images.remotePatterns` 配置以增强安全限制。
`revalidateTag()` 单参数	使用 `revalidateTag(tag, profile)` 进行 SWR，或在 Actions 中使用 `updateTag(tag)` 进行读后写。

其他改进

性能改进：对 next dev 和 next start 命令进行了显著的性能优化。
next.config.ts 的 Node.js 原生 TypeScript：运行带有 --experimental-next-config-strip-types 标志的 next dev、next build 和 next start 命令，以启用 next.config.ts 的原生 TypeScript。

Next.js 团队计划在稳定版本发布之前，在文档中分享更全面的迁移指南。

性能狂飙！Next.js 16 重磅发布：Turbopack 稳定、编译提速 10 倍！🚀🚀🚀

升级到 Next.js 16：

新功能和改进

缓存组件（Cache Components）

Next.js Devtools MCP

proxy.ts (原 middleware.ts)

日志改进

之前在 Beta 版本中宣布的功能：

开发者体验

Turbopack (稳定版)

Turbopack 文件系统缓存 (Beta)

简化的 create-next-app

Build Adapters API (Alpha)

React Compiler 支持 (稳定版)

核心功能与架构

增强路由和导航

改进的缓存 API

React 19.2 和 Canary 功能

破坏性变更和其他更新

版本要求

移除项

行为变更

弃用项

其他改进

`proxy.ts` (原 `middleware.ts`)

简化的 `create-next-app`