Next.js 15.3 | Next.js 框架

Next.js 15.3 包括用于构建的 Turbopack、新的客户端检测和导航钩子等

用于构建的 Turbopack (alpha): 更快的生产构建，通过 8000 多个测试 (99%)
Rspack 的社区支持 (实验性): 具有 Webpack 兼容性的替代打包器
客户端检测钩子: 早期监控和分析设置
导航钩子: 使用 onNavigate 和 useLinkStatus 控制路由
TypeScript 插件性能改进: 改进了对大型代码库的支持

立即升级，或开始使用

终端

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@latest

Turbopack 构建 (alpha)

在 next dev --turbopack 稳定发布之后，Next.js 15 上 超过 50% 的开发会话 现在正在使用 Turbopack。

此版本包括 next build --turbopack 的 alpha 版本，将本地开发的相同性能改进带到生产构建。

通过升级到 15.3 并运行以下命令，尝试将 Turbopack 用于生产构建

终端

next build --turbopack

功能

99.3% 的 next build 集成测试已通过。您可以在 areweturboyet.com 跟踪我们 100% 的进度。如果您的应用程序已经可以与 Turbopack 一起用于 dev，那么它应该也可以与 build 一起使用。

Turbopack 构建目前处于 alpha 阶段。我们不建议在此阶段在任务关键型应用程序的生产环境中使用它们。相反，请在预览或暂存环境中尝试它们，或在本地运行构建以观察捆绑包大小和性能的差异。

我们正在积极努力通过作用域提升、改进分块和其他优化来缩小这些性能差距。

构建性能

我们一直在 Vercel 的大型内部 monorepo 和早期合作伙伴代码库上验证 Turbopack。Turbopack 的架构相对于我们之前的 Webpack 实现的一个优势是，添加 CPU 核心时性能会扩展

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

通过我们在持久缓存方面的实验性工作，这些构建时间甚至进一步缩短。我们将在未来的版本中分享更多相关信息。

生态系统

我们正在与常用的集成（如 Sentry）合作，以确保它们在稳定版本发布之前与 next build --turbopack 兼容。如果您是工具作者，希望与我们合作以确保兼容性，请通过 X 上的 @leerob 联系。

反馈

请分享您的反馈，即使运行顺利，以帮助我们准备稳定版本

GitHub 讨论，用于一般反馈
GitHub 问题，用于重现

`next.config.ts` 中的 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 配置选项的完整列表，请参阅 Turbopack API 参考。

Rspack 的社区支持 (实验性)

Rspack 团队为 Next.js 创建了一个社区插件。

这为需要接近完全 Webpack API 兼容性，但还不能迁移到 Turbopack 的 Next.js 用户提供了一个选项，以提高他们的本地编译和构建时间。我们对 Turbopack 的进展充满信心，并将继续为 Webpack 用户提供增量式的前进道路。

虽然这不是官方的 Next.js 插件，但我们正在与 Rspack 团队合作。两个团队都将合作开发共享的基础，如 SWC 和 Lightning CSS，这将使所有 Next.js 用户和更广泛的生态系统受益。

如果您想探索将 Rspack 与 Next.js 一起使用，可以使用 next-rspack 适配器。我们正在针对我们的集成测试套件运行该适配器。目前它通过了约 96% 的测试。

查看示例或在 Rspack 文档中了解更多信息。

客户端检测钩子

instrumentation-client.js|ts 文件允许您添加在应用程序前端代码开始执行之前运行的监控和分析代码。

这非常适合在生命周期中尽早设置性能跟踪、错误监控或其他客户端可观测性工具。

instrumentation-client.js

// Set up performance monitoring
performance.mark('app-init');
 
// Initialize analytics
console.log('Analytics initialized');
 
// Set up error tracking
window.addEventListener('error', (event) => {
  // Send to your error tracking service
  reportError(event.error);
});

将此文件放在项目根目录中，类似于服务器端检测。

在 instrumentation-client 文件文档中了解更多信息。

我们正在 Next.js 15.3 中引入新的导航钩子，以增强客户端路由功能，使您可以更轻松地开发本地化的加载状态并实现诸如导航取消之类的复杂控件。

`onNavigate`

此事件处理程序是 Link 组件的新属性，并在客户端导航期间执行，使您可以精确控制应用程序的路由行为。

与 onClick 事件（对所有点击触发）不同，onNavigate 可以用于单页应用 (SPA) 导航，允许您执行代码甚至使用 preventDefault() 取消导航。

此 API 可用于实现过渡动画、导航守卫或分析跟踪，这些跟踪应仅在实际页面过渡期间运行。

通过访问 onNavigate 文档了解更多信息。

`useLinkStatus`

useLinkStatus 客户端组件钩子返回一个 pending 布尔值，指示导航何时正在进行中，从而为您提供对加载状态的本地化控制。

此 API 仿照 React 的 useFormStatus 构建，并且有助于在页面过渡期间添加自定义加载指示器，尤其是在禁用预取或链接路由没有专用加载状态时。

通过放置一个使用 useLinkStatus 作为 <Link> 组件后代的组件，您可以创建对实时导航事件做出反应的响应式 UI 元素。

通过访问 useLinkStatus 文档了解更多信息。

TypeScript 插件性能改进

Next.js TypeScript 语言服务器插件 (LSP) 现在更快了。

LSP 提供内联 Intellisense 功能，例如服务器/客户端边界验证、组件属性提示、配置自动完成以及 React 服务器组件中不允许的 API 的错误检测。在非常大的代码库中，该插件以前可能导致 TypeScript 语言服务挂起或崩溃。

我们已进行重大性能改进以解决这些问题。在我们的内部测试中，插件响应时间提高了约 60%，并且没有出现冻结或崩溃。

其他更改

[功能] 在 images.remotePatterns 中支持 new URL() (#77692)
[功能] 视口选项现在与 metadata 分开 (#77427)
[功能] 添加 unstable_dynamicOnHover 选项 (#77866)
[功能] 添加对 Pinterest Rich Pins 的支持 (#76988)
[改进] 使 revalidate 在路由处理程序中被重定向跟随时工作 (#77090)
[改进] 确保在服务器操作中调用 revalidate 后保持强一致性 (#76885)
[改进] 升级 sharp 以加快 PNG 到 AVIF 的转换速度 (#77839)

贡献者

Next.js 是 3,000 多名个人开发者共同努力的成果。此版本由以下人员为您带来

Next.js 团队： Andrew、 Hendrik、 Janka、 Jiachi、 Jimmy、 Jiwon、 JJ、 Josh、 Jude、 Sam、 Sebastian、 Sebbie、 Wyatt 和 Zack。
Turbopack 团队： Benjamin、 Donny、 Josh、 Maia、 Niklas、 Tim、 Tobias 和 Will。
Next.js 文档 团队： Delba、 Rich、 Ismael 和 Lee。

非常感谢 @raunofreiberg、@huozhi、@ijjk、@timneutkens、@gaojude、@leerob、@mezotv、@bgw、@samcx、@ztanner、@sokra、@mischnic、@wbinnssmith、@kdy1、@unstubbable、@ahabhgk、@ScriptedAlchemy、@SukkaW、@wyattjoh、@eps1lon、@Amirroid、@Netail、@lubieowoce、@gnoff、@jackwilson323、@acdlite、@sbougerel、@kevva、@kasperpeulen、@Cy-Tek、@dvoytenko、@husseinraoouf、@isBatak、@iamkd、@delbaoliveira、@jantimon、@padmaia、@Bernardoow、@styfle、@devjiwonchoi、@JamBalaya56562 和 @Marukome0743 的帮助！