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

功能

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

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

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

构建性能

我们一直在 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 键

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 文件允许您添加在应用程序前端代码开始执行之前运行的监控和分析代码。

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

// 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 提供内联智能感知功能，例如服务器/客户端边界验证、组件属性提示、配置自动补全以及 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 Docs 团队：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 的帮助！