Next.js 16 Beta：性能、架构与开发体验全面升级 💯💯💯

2025 年 10 月 9 日，Next.js 团队发布了 16 版 Beta 版本，带来了对 Turbopack、缓存机制、React 编译器、路由系统等方面的重大改进。这些更新旨在提升开发效率、构建性能，并为即将到来的稳定版奠定基础。

核心亮点

Turbopack（稳定版）：作为默认打包器，提供 2--5 倍的构建速度提升和高达 10 倍的 Fast Refresh 性能。
文件系统缓存（Beta）：在开发模式下启用，显著提升大型项目的启动和编译速度。
React 编译器支持（稳定版）：自动对组件进行记忆化处理，减少不必要的重新渲染。
构建适配器 API（Alpha）：允许开发者创建自定义适配器，修改构建流程，支持多平台部署。
路由与预取优化：实现布局去重和增量预取，减少网络传输量。
缓存 API 改进：新增 updateTag() 和 refresh()，提供更精细的缓存控制。
React 19.2 新特性：引入视图过渡（View Transitions）、useEffectEvent() 和 <Activity /> 组件。
破坏性更改：包括异步参数、next/image 默认值等更新，需注意迁移。

开发者体验提升

1. Turbopack：默认打包器

Turbopack 已达到稳定状态，成为所有新项目的默认打包器。自 Beta 发布以来，已有超过 50% 的开发会话和 20% 的生产构建使用 Turbopack。

bash 复制代码

# 启用 Webpack（如有自定义配置）
next dev --webpack
next build --webpack

2. 文件系统缓存（Beta）

在开发模式下启用文件系统缓存，可显著提升大型项目的启动和编译速度。所有内部 Vercel 应用已在使用此功能，开发者生产力显著提高。

ts 复制代码

// next.config.ts
const nextConfig = {
  experimental: {
    turbopackFileSystemCacheForDev: true,
  },
};

export default nextConfig;

3. React 编译器支持（稳定版）

React 编译器现已稳定支持，自动对组件进行记忆化处理，减少不必要的重新渲染。启用此功能可能会增加编译时间，但能显著提升性能。

ts 复制代码

// next.config.ts
const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

bash 复制代码

# 安装 React 编译器插件
npm install babel-plugin-react-compiler@latest

4. 构建适配器 API（Alpha）

构建适配器允许开发者创建自定义适配器，修改构建流程，支持多平台部署。在配置中指定适配器路径：

ts 复制代码

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

export default nextConfig;

5. 路由与预取优化

Next.js 16 对路由系统进行了优化，实现布局去重和增量预取，减少网络传输量。例如，页面中有 50 个产品链接时，共享布局只会下载一次，而不是 50 次。

6. 缓存 API 改进

revalidateTag()：现在需要第二个参数 cacheLife，支持 max、hours、days 等预设值，或自定义过期时间。
updateTag()：在 Server Actions 中使用，确保用户操作后立即刷新缓存。
refresh()：在 Server Actions 中使用，用于刷新未缓存的数据。

ts 复制代码

// 使用 updateTag()
"use server";
import { updateTag } from "next/cache";

export async function updateUserProfile(userId: string, profile: Profile) {
  await db.users.update(userId, profile);
  updateTag(`user-${userId}`);
}

ts 复制代码

// 使用 refresh()
"use server";
import { refresh } from "next/cache";

export async function markNotificationAsRead(notificationId: string) {
  await db.notifications.markAsRead(notificationId);
  refresh();
}

7. React 19.2 新特性

Next.js 16 与 React 19.2 一起发布，带来了以下新特性：

视图过渡（View Transitions）：在导航或状态更新时，平滑地过渡元素的显示。
useEffectEvent()：将非响应式逻辑提取到可重用的 Effect Event 函数中。
<Activity /> 组件：在后台活动期间隐藏 UI，同时保持状态和清理 Effect。

破坏性更改与迁移建议

Node.js 版本要求：最低要求 Node.js 20.9+，Node 18 已被弃用。
TypeScript 版本要求：最低要求 TypeScript 5.1+。
移除功能：AMP、middleware.ts、next lint 命令等已被移除。
默认值更改：next/image、缓存 TTL、异步路由处理程序等默认值已更改。

建议开发者在升级前仔细阅读官方文档，确保项目兼容性。

如何升级到 Beta

自动升级 CLI：

bash 复制代码

  npx @next/codemod@canary upgrade beta

手动升级：

bash 复制代码

  npm install next@beta react@latest react-dom@latest

创建新项目：

bash 复制代码

  npx create-next-app@beta

欲了解更多信息，请访问 Next.js 官方博客：nextjs.org/blog/next-1...