🚀 快速安装

复制以下命令并运行,立即安装此 Skill:

npx skills add https://skills.sh/affaan-m/everything-claude-code/nextjs-turbopack

💡 提示:需要 Node.js 和 NPM

Next.js 和 Turbopack (Next.js and Turbopack)

Next.js 16+ 默认使用 Turbopack 进行本地开发:这是一个用 Rust 编写的增量打包器,可显著加快开发启动和热更新速度。

何时使用 (When to Use)

  • Turbopack(默认开发模式)(default dev):用于日常开发。冷启动和热模块替换更快,尤其是在大型应用中。
  • Webpack(旧版开发模式)(legacy dev):仅在遇到 Turbopack 错误或在开发中依赖仅支持 webpack 的插件时使用。通过 --webpack(或 --no-turbopack,具体取决于您的 Next.js 版本;请查阅您版本的官方文档)禁用。
  • 生产环境 (Production):生产构建行为(next build)可能使用 Turbopack 或 webpack,具体取决于 Next.js 版本;请查阅您版本的官方 Next.js 文档。

在以下情况下使用:开发或调试 Next.js 16+ 应用、诊断开发启动缓慢或热模块替换问题、或优化生产包体积。

工作原理 (How It Works)

  • Turbopack:用于 Next.js 开发的增量打包器。使用文件系统缓存,因此重启速度更快(例如在大型项目中快 5-14 倍)。
  • 开发模式默认启用 (Default in dev):从 Next.js 16 开始,除非禁用,否则 next dev 将使用 Turbopack 运行。
  • 文件系统缓存 (File-system caching):重启时重用之前的工作;缓存通常位于 .next 下;基本使用无需额外配置。
  • 打包分析器(Next.js 16.1+)(Bundle Analyzer – Next.js 16.1+):实验性打包分析器,用于检查输出并查找大型依赖项;通过配置或实验性标志启用(请查阅您版本的 Next.js 文档)。

示例 (Examples)

命令 (Commands)

next dev
next build
next start

用法 (Usage)

运行 next dev 进行使用 Turbopack 的本地开发。使用打包分析器(参见 Next.js 文档)优化代码分割并精简大型依赖项。尽可能使用 App Router 和服务端组件。

最佳实践 (Best Practices)

  • 保持使用最新的 Next.js 16.x 版本,以获得稳定的 Turbopack 和缓存行为。
  • 如果开发速度慢,确保使用的是 Turbopack(默认)并且缓存没有被不必要地清除。
  • 对于生产环境包体积问题,使用您版本的官方 Next.js 打包分析工具。

📄 原始文档

完整文档(英文):

https://skills.sh/affaan-m/everything-claude-code/nextjs-turbopack

💡 提示:点击上方链接查看 skills.sh 原始英文文档,方便对照翻译。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。