Turbopack

Turbopack (beta) is an incremental bundler optimized for JavaScript and TypeScript, written in Rust, and built into Next.js.

Usage

Turbopack can be used in Next.js in both the pages and app directories for faster local development. To enable Turbopack, use the --turbo flag when running the Next.js development server.

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Supported features

Turbopack in Next.js requires zero-configuration for most users and can be extended for more advanced use cases. To learn more about the currently supported features for Turbopack, view the API Reference.

Unsupported features

Turbopack currently only supports next dev and does not support next build. We are currently working on support for builds as we move closer towards stability.

These features are currently not supported:

• webpack() configuration in next.config.js
  • Turbopack replaces Webpack, this means that webpack configuration is not supported.
  • To configure Turbopack, see the documentation.
  • A subset of Webpack loaders are supported in Turbopack.
• Babel (.babelrc)
  • Turbopack leverages the SWC compiler for all transpilation and optimizations. This means that Babel is not included by default.
  • If you have a .babelrc file, you might no longer need it because Next.js includes common Babel plugins as SWC transforms that can be enabled. You can read more about this in the compiler documentation.
  • If you still need to use Babel after verifying your particular use case is not covered, you can leverage Turbopack's support for custom webpack loaders to include babel-loader.
• Creating a root layout automatically in App Router.
  • This behavior is currently not supported since it changes input files, instead, an error will be shown for you manually add a root layout in the desired location.
• @next/font (legacy font support).
  • @next/font is deprecated in favor of next/font. next/font is fully supported with Turbopack.
• new Worker('file', import.meta.url).
  • We are planning to implement this in the future.
• Relay transforms
  • We are planning to implement this in the future.
• experimental.nextScriptWorkers
  • We are planning to implement this in the future.
• AMP.
  • We are currently not planning to support AMP in Next.js with Turbopack.
• Yarn PnP
  • We are currently not planning to support Yarn PnP in Next.js with Turbopack.
• experimental.urlImports
  • We are currently not planning to support experimental.urlImports in Next.js with Turbopack.

Generating Trace Files

Trace files allow the Next.js team to investigate and improve performance metrics and memory usage. To generate a trace file, append NEXT_TURBOPACK_TRACING=1 to the next dev --turbo command, this will generate a .next/trace.log file.

When reporting issues related to Turbopack performance and memory usage, please include the trace file in your GitHub issue.