Next.js 15.3 版本发布 | Next.js

Next.js 15.3 包含以下重要更新：

Turbopack 构建支持 (alpha)：生产构建速度提升，通过 8000+ 测试用例（99% 通过率）
社区版 Rspack 支持 (实验性)：兼容 Webpack 的替代打包方案
客户端埋点钩子：实现早期监控与分析配置
导航钩子：通过 onNavigate 和 useLinkStatus 控制路由行为
TypeScript 插件优化：增强对大代码库的支持

立即升级，或通过以下命令新建项目：

终端

# 使用自动化升级工具
npx @next/codemod@canary upgrade latest
 
# 或手动升级
npm install next@latest react@latest react-dom@latest
 
# 或创建新项目
npx create-next-app@latest

Turbopack 构建支持 (alpha)

自 next dev --turbopack 稳定版发布后，超过 50% 的 Next.js 15 开发会话已在使用 Turbopack。

本次更新包含 next build --turbopack 的 alpha 版本，将本地开发的性能优势延伸至生产构建。

升级至 15.3 后可通过以下命令体验：

终端

next build --turbopack

功能支持

当前 next build 的集成测试通过率达 99.3%。您可通过 areweturboyet.com 追踪进度。若您的应用已兼容 dev 模式的 Turbopack，则无需修改即可用于生产构建。

Turbopack 构建目前处于 alpha 阶段，不建议在关键生产环境使用。您可在预览/测试环境或本地构建中观察打包体积与性能差异。

我们正通过作用域提升、分块优化等技术持续缩小性能差距。

构建性能

在 Vercel 大型单体仓库与早期合作伙伴代码库中的测试表明，Turbopack 架构相比原 Webpack 方案能随 CPU 核心数增加线性提升性能：

4 核：比 Webpack 快 28%
16 核：比 Webpack 快 60%
30 核：比 Webpack 快 83%

结合实验性持久化缓存技术，构建时间可进一步缩短。我们将在后续版本中公布更多细节。

生态兼容

我们正与 Sentry 等常用工具合作确保其兼容 next build --turbopack。工具开发者可通过 @leerob on X 联系我们进行适配。

反馈渠道

欢迎通过以下渠道提交使用反馈：

GitHub 讨论区提交常规反馈
GitHub Issues 报告可复现问题

稳定版 Turbopack 配置（`next.config.ts`）

Turbopack 配置已从 experimental.turbo 迁移至顶层 turbopack 键：

next.config.ts

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
};
 
export default nextConfig;

为保持兼容性，experimental.turbo 配置将持续支持至 Next.js 下个主版本。

完整配置选项请参阅 Turbopack API 文档。

社区版 Rspack 支持（实验性）

Rspack 团队已为 Next.js 开发社区插件。

该方案为需要 Webpack API 完全兼容但暂无法迁移至 Turbopack 的用户提供了编译加速方案。我们将继续为 Webpack 用户提供渐进式迁移路径。

此插件虽非官方维护，但我们正与 Rspack 团队合作，在 SWC 和 Lightning CSS 等底层工具上共享技术成果。当前测试通过率约 96%。

查看示例或查阅 Rspack 文档。

客户端埋点钩子

通过根目录下的 instrumentation-client.js|ts 文件，可在应用前端代码执行前注入监控与分析逻辑：

instrumentation-client.js

// 性能监控
performance.mark('app-init');
 
// 分析工具初始化
console.log('Analytics initialized');
 
// 错误追踪
window.addEventListener('error', (event) => {
  // 上报至错误监控服务
  reportError(event.error);
});