推了这么久的 Turbopack,现在终于能用了 🤔🤔🤔

最近在出一个前端的体系课程,里面的内容非常详细,如果你感兴趣,可以加我 v 进行联系 yunmz777:

浪费你几秒钟时间,内容正式开始

Next.js 15.4 于 2025 年 7 月 29 日推出,其中最重要的是 Turbopack 构建命令 next build --turbopack 已通过所有集成测试(超过 8,300 个),标志着 Turbopack 正式迈向稳定阶段并有望成为默认打包工具。

此外,本次版本新增实用功能如 router.prefetch() 失效回调钩子、404 页面全局 metadata 支持等,并修复了一系列稳定性和性能相关问题 。同时,开发者还获得了对即将发布的 Next.js 16 的预览,体验缓存组件统一配置、优化客户端路由、增强调试工具等即将到来的核心功能 。

Turbopack 构建通过 100% 集成测试

Turbopack 是由 Vercel 开发的新一代 JavaScript 和 TypeScript 构建工具,旨在取代传统的 Webpack。它采用 Rust 编写,具有更高的构建速度和更低的资源消耗,特别适合大型项目和高频率迭代的开发流程。Turbopack 支持模块热更新(HMR)更快,响应时间更短,从而提升前端开发效率。它也是 Next.js 官方推荐的未来构建工具。

Next.js 15.4 中使用 next build --turbopack 构建,通过了全部 8,302 项生产环境集成测试(包含各种边界、回归和调试场景),并已经被 Vercel 用于其高流量网站发布,表明 Turbopack 已从实验状态走向稳定、可用于生产环境的构建系统。

新功能 Features

Next.js 15.4 带来了多项实用增强,进一步提升了开发者的使用体验。例如,router.prefetch() 方法新增了 onInvalidate 回调,可以在缓存失效时自动重新提取资源,特别适用于构建自定义导航组件时保持数据的实时同步。

同时,<Link prefetch="auto"> 这一语法糖引入,让代码更具可读性,并能继续保有智能预获取行为。

在 SEO 支持方面,官方为 global-not-found.js 文件加入了自定义元数据与结构化数据的导出能力,方便为 404 页面配置更精准的搜索引擎信息。

调试功能也得到增强,next build 命令新增 --debug-prerender 标志,用于开发模式下调试 PPR(部分预渲染)或静态渲染相关的错误,输出更完整的堆栈信息。

此外,开发者现在可以在服务端依赖中使用 htmlrewriter 包进行 HTML 转换,也意味着页面结构控制更灵活。而在渲染策略方面,拦截式动态路由(Intercepted Routes)也加入了对 PPR 的支持,使页面加载表现更加高效。

修复 Fixes

在稳定性和性能层面,Next.js 15.4 同样做了诸多细节优化。

例如,修复了配置对象在复制过程中可能引发的副作用问题,避免因引用关系导致的意外修改。同时,也解决了预取缓存中的一致性问题,确保 staleTime 设置真正生效,并修复了静态页面在过期数据保留方面的 bug。

HTTP 缓存策略也得到了增强,Vary 头的设置现已恢复正常,有助于更精准地进行响应缓存。

此外,React Compiler 的"interestingness"和"usefulness"判定机制得以纠正,提升了编译分析的准确度;launchEditor 功能在处理特定路径格式时的异常也被修复。

最后,对于 Server Actions,官方修正了非 multipart 请求时 bodySizeLimit 的处理逻辑,同时确保无效的操作 ID 会正确返回 404 错误页,提升了开发者调试体验和系统健壮性。

优化 Improvements

本次更新还针对服务器组件(RSC)机制进行了多个关键修正与增强。首先,RSC 请求在发生重定向后将确保查询参数被正确传递,避免跳转中断或数据丢失的问题,同时也为搜索引擎爬虫提供了更优雅的错误回退处理,以维护良好的 SEO 表现。为进一步明确服务器与客户端职责边界,Next.js 15.4 禁止在客户端组件中使用 unstable_rootParams,防止错误使用内部 API。

此外,RSC 请求现已支持缓存失效参数验证,避免服务端重复处理无效查询,提高性能与准确性。在依赖管理方面,@vercel/og 被更新至 v0.7.2,同时将 assert/strict 标记为外部依赖,以优化构建时的模块打包逻辑。为提升渲染结构的稳定性,流式元数据输出也得到改进,确保其始终处于页面顶层,避免 DOM 混乱;而 FlightRouterState 中的 searchParam 数据则默认被省略,从而减少不必要的重渲染与传输体积。

除了功能增强和修复,Next.js 15.4 在性能层面也有显著提升。静态路径生成(Static Params)过程被优化,参数处理更高效,有助于加快构建速度。React Compiler 方面则改为优先通过 SWC 进行源文件检查,从而进一步加速编译流程。此外,开发者在启用 NEXT_CPU_PROF 环境变量时,CPU 使用情况分析现在也能更精确地反映本地性能瓶颈,为调优提供可靠依据。

哪些情况该升级?如何升级?

对于考虑升级到 Next.js 15.4 的开发者而言,这是一个非常值得把握的版本,尤其适合希望告别 Webpack、追求构建效率与现代开发体验的团队。如果你的项目构建时间较长、本地热重载缓慢,或在 CI/CD 流程中存在构建瓶颈,那么升级后通过 Turbopack 所带来的性能提升会非常可观。

不过在升级前,仍需注意兼容性问题。若项目依赖大量 Webpack 插件或自定义 loader,建议先在功能分支中进行升级测试。同时,请务必清理缓存目录(如 .next/.vercel/),并执行全面的单元与集成测试,确保升级后的运行时行为一致。

你可以通过以下三种方式升级:

  1. 自动升级 CLI(推荐)

使用官方 codemod 工具进行依赖更新和常见兼容性修复:

bash 复制代码
npx @next/codemod@canary upgrade latest
  1. 手动升级依赖

如果你希望手动控制版本更新,可使用以下命令:

bash 复制代码
npm install next@latest react@latest react-dom@latest
  1. 初始化新项目

想从零开始体验最新版 Next.js,可以直接初始化新项目:

bash 复制代码
npx create-next-app@latest

借助 15.4,你不仅能获得更快的构建性能,还能提前感受接近稳定的 Turbopack 所带来的开发革新。

Next.js 16 预览:值得期待的新能力

值得关注的是,Next.js 15.4 也预告了即将在 2025 年夏季 推出的 16 版本中的一系列核心能力,展示了未来演进方向。首先,新的统一缓存机制 cacheComponents 将引入更简洁的 API(如 use cache、Dynamic IO、PPR 等),帮助开发者以更直观的方式实现性能优化与响应式缓存策略。

与此同时,Turbopack 将正式转入 Beta 通道,迈向成为 Next.js 默认构建工具的重要一步;客户端路由预取逻辑也将更加智能,支持自动 invalidation 判断,从而减少带宽浪费并加速导航体验。调试工具方面,Next.js DevTools 也将获得重大升级,包括路由结构可视化、组件状态调试、浏览器控制台日志转发,甚至加入 AI 辅助调试能力。

此外,原本为实验特性的 Node.js middleware 将在 v16 中正式稳定,开发者可以放心地在生产环境中使用。同时,Next.js 还计划推出"部署适配器(Deployment Adapters)" alpha 版,支持更灵活的部署目标与平台适配。随着演进,旧版本兼容内容也会被清理:v16 将弃用 Node.js 18、AMP 相关功能,以及对 Next.js Image API 做出调整,官方也会提供相应的迁移指南。

如果你希望提前体验这些即将到来的功能,可以将项目依赖切换到 next@canary,并在 next.config.js 中启用相关实验性选项,例如:

js 复制代码
// next.config.js
module.exports = {
  experimental: {
    dynamicIO: true,
    turbopackPersistentCaching: true,
  },
};

通过这些设置,开发者可以抢先感受 Next.js 下一代架构与能力布局,为未来升级做好准备。

总结

Next.js 15.4 不仅在 Turbopack 的构建稳定性和性能表现上取得重要突破,同时也带来了大量聚焦开发体验的语法与平台细节优化。这个版本标志着 Next.js 正稳步推进 Vercel 路线图中关于模块化、高性能、现代化全栈框架的长期愿景,并为即将到来的 v16 奠定了坚实的技术基础。对于曾因 Turbopack 稳定性而持观望态度的团队来说,15.4 是一个值得深入试用的关键版本。

相关推荐
北鸟南游4 分钟前
用现有bootstrap的模板,改造成nuxt3项目
前端·bootstrap·nuxt.js
前端老鹰5 分钟前
JavaScript Intl.RelativeTimeFormat:自动生成 “3 分钟前” 的国际化工具
前端·javascript
梦想CAD控件6 分钟前
(在线CAD插件)网页CAD实现图纸表格智能提取
前端·javascript·全栈
木子雨廷23 分钟前
Flutter 开发一个plugin
前端·flutter
重生之我是一名前端程序员26 分钟前
websocket + xterm 前端实现网页版终端
前端·websocket
sorryhc27 分钟前
【AI解读源码系列】ant design mobile——Space间距
前端·javascript·react.js
uhakadotcom42 分钟前
NPM与NPX的区别是什么?
前端·面试·github
GAMC1 小时前
如何修改node_modules的组件不被install替换?可以使用patch-package
前端
页面仔Dony1 小时前
webpack 与 Vite 深度对比
前端·前端工程化
Juchecar1 小时前
Vue3 组件生命周期详解
前端·vue.js