Next.js 与 Turbopack
Next.js 16+ 在本地开发中默认使用 Turbopack:这是一个用 Rust 编写的增量打包工具,可显著提升开发启动速度和热更新速度。
何时使用
- Turbopack(默认开发):用于日常开发。在大规模应用中,冷启动和 HMR 速度更快。
- Webpack(遗留开发):仅在遇到 Turbopack 错误或在开发中依赖仅 webpack 支持的插件时使用。通过
--webpack(或--no-turbopack,具体取决于您的 Next.js 版本;请查阅相应版本的文档)禁用。 - 生产环境:生产构建行为(
next build)可能使用 Turbopack 或 webpack,具体取决于 Next.js 版本;请查阅您对应版本的最新官方文档。
适用于:开发或调试 Next.js 16+ 应用、诊断开发启动缓慢或 HMR 问题、或优化生产包体积。
工作原理
- Turbopack:Next.js 开发的增量打包工具。利用文件系统缓存,重启速度更快(例如,在大型项目上提升 5-14 倍)。
- 默认在开发中使用:从 Next.js 16 开始,
next dev默认使用 Turbopack,除非显式禁用。 - 文件系统缓存:重启时重用之前的工作;缓存通常位于
.next目录下;基本使用无需额外配置。 - Bundle Analyzer(Next.js 16.1+):实验性的 Bundle Analyzer,用于检查输出并发现体积较大的依赖;通过配置或实验性标记启用(请查阅您对应版本的 Next.js 文档)。
示例
命令
next dev
next build
next start
使用方式
运行 next dev 进行本地开发,Turbopack 将自动生效。使用 Bundle Analyzer(请查阅 Next.js 文档)优化代码分割并裁剪大型依赖。尽可能使用 App Router 和服务端组件。
中间件文件命名
Next.js 16 引入了 proxy.ts 作为中间件文件名,取代了之前的 middleware.ts 约定:
- Next.js 16+:在项目根目录使用
proxy.ts - Next.js 16 之前:在项目根目录使用
middleware.ts
此文件名变更与 Next.js 版本 相关,而非与使用的打包工具(Turbopack 或 webpack)相关。请务必查阅您所审查版本对应的官方文档。
在 Next.js 16 项目中,不要将 proxy.ts 标记为命名错误或缺失的中间件文件。 该文件名正确且有意为之。建议重命名为 middleware.ts 将导致中间件执行失败。
参考文档:Next.js 代理文档
最佳实践
- 保持使用最新的 Next.js 16.x 版本,以获得稳定的 Turbopack 和缓存行为。
- 如果开发速度慢,请确保使用 Turbopack(默认)且缓存未被不必要地清除。
- 针对生产环境包体积问题,请使用您所对应版本的最新官方 Next.js 捆绑分析工具。