nextjs-turbopack

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Next.js and Turbopack

Next.js 与 Turbopack

Next.js 16+ uses Turbopack by default for local development: an incremental bundler written in Rust that significantly speeds up dev startup and hot updates.

Next.js 16+ 在本地开发中默认使用 Turbopack：这是一款用 Rust 编写的增量打包工具，可显著提升开发启动速度和热更新效率。

When to Use

适用场景

Turbopack (default dev): Use for day-to-day development. Faster cold start and HMR, especially in large apps.
Webpack (legacy dev): Use only if you hit a Turbopack bug or rely on a webpack-only plugin in dev. Disable with
```
--webpack
```
(or
```
--no-turbopack
```
depending on your Next.js version; check the docs for your release).
Production: Production build behavior (
```
next build
```
) may use Turbopack or webpack depending on Next.js version; check the official Next.js docs for your version.

Use when: developing or debugging Next.js 16+ apps, diagnosing slow dev startup or HMR, or optimizing production bundles.

Turbopack（默认开发工具）：用于日常开发。冷启动和HMR（热模块替换）速度更快，在大型项目中表现尤为突出。
Webpack（传统开发工具）：仅当遇到 Turbopack 相关 Bug，或开发中依赖仅支持 webpack 的插件时使用。可通过
```
--webpack
```
（或根据 Next.js 版本使用
```
--no-turbopack
```
；请查看对应版本的官方文档）禁用 Turbopack。
生产环境：生产构建（
```
next build
```
）所使用的工具可能是 Turbopack 或 webpack，具体取决于 Next.js 版本；请查看对应版本的 Next.js 官方文档。

适用场景包括：开发或调试 Next.js 16+ 应用、排查开发启动或 HMR 缓慢问题，以及优化生产打包产物。

How It Works

工作原理

Turbopack: Incremental bundler for Next.js dev. Uses file-system caching so restarts are much faster (e.g. 5–14x on large projects).
Default in dev: From Next.js 16,
```
next dev
```
runs with Turbopack unless disabled.
File-system caching: Restarts reuse previous work; cache is typically under
```
.next
```
; no extra config needed for basic use.
Bundle Analyzer (Next.js 16.1+): Experimental Bundle Analyzer to inspect output and find heavy dependencies; enable via config or experimental flag (see Next.js docs for your version).

Turbopack：Next.js 开发环境的增量打包工具。利用文件系统缓存，重启速度大幅提升（例如在大型项目中可达到 5-14 倍）。
开发环境默认启用：从 Next.js 16 开始，
```
next dev
```
命令默认使用 Turbopack，除非手动禁用。
文件系统缓存：重启时可复用之前的工作成果；缓存通常存储在
```
.next
```
目录下；基础使用无需额外配置。
Bundle Analyzer（Next.js 16.1+）：实验性的 Bundle Analyzer 工具，可用于检查打包输出并找出体积较大的依赖项；可通过配置或实验性标志启用（请查看对应版本的 Next.js 文档）。

Examples

示例

Commands

命令

bash

next dev
next build
next start

bash

next dev
next build
next start

Usage

使用方法

Run

next dev

for local development with Turbopack. Use the Bundle Analyzer (see Next.js docs) to optimize code-splitting and trim large dependencies. Prefer App Router and server components where possible.

运行

next dev

即可在本地开发中使用 Turbopack。借助 Bundle Analyzer（请查看 Next.js 文档）优化代码分割并精简体积较大的依赖项。尽可能优先使用 App Router 和服务端组件。

Best Practices

最佳实践

Stay on a recent Next.js 16.x for stable Turbopack and caching behavior.
If dev is slow, ensure you're on Turbopack (default) and that the cache isn't being cleared unnecessarily.
For production bundle size issues, use the official Next.js bundle analysis tooling for your version.

保持使用最新的 Next.js 16.x 版本，以获得稳定的 Turbopack 和缓存功能。
如果开发速度缓慢，请确认已启用 Turbopack（默认启用），且缓存未被不必要地清除。
若遇到生产打包体积问题，请使用对应版本的官方 Next.js 打包分析工具。