推了这么久的 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 是一个值得深入试用的关键版本。

相关推荐
gnip7 分钟前
做个交通信号灯特效
前端·javascript
小小小小宇8 分钟前
Webpack optimization
前端
尝尝你的优乐美10 分钟前
前端查缺补漏系列(二)JS数组及其扩展
前端·javascript·面试
咕噜签名分发可爱多12 分钟前
苹果iOS应用ipa文件安装之前?为什么需要签名?不签名能用么?
前端
她说人狗殊途27 分钟前
Ajax笔记
前端·笔记·ajax
yqcoder35 分钟前
33. css 如何实现一条 0.5 像素的线
前端·css
excel1 小时前
Nuxt 3 + PWA 通知完整实现指南(Web Push)
前端·后端
yuanmenglxb20041 小时前
构建工具和脚手架:从源码到dist
前端·webpack
rit84324991 小时前
Web学习:SQL注入之联合查询注入
前端·sql·学习
啃火龙果的兔子1 小时前
Parcel 使用详解:零配置的前端打包工具
前端