Turbopack in Next.js: faster local development

Turbopack is a Rust-based bundler that dramatically speeds up Next.js development. Written by the team behind Webpack, it's designed for instant feedback loops—cold starts in milliseconds and hot module replacement (HMR) that feels instant even in large codebases.

Why Turbopack?

Development servers spend time bundling and transforming code. As projects grow, this slows down:

HMR improvements are even more dramatic—updates that took seconds with Webpack happen in milliseconds with Turbopack.

How it works

Turbopack uses several techniques:

Instead of bundling everything upfront, Turbopack compiles on demand and caches aggressively.

Enabling Turbopack

Development (stable)

Add --turbo to your dev command:

{
  "scripts": {
    "dev": "next dev --turbo"
  }
}

Or run directly:

npx next dev --turbo

Production builds (beta)

As of Next.js 15, production builds with Turbopack are in beta:

{
  "scripts": {
    "build": "next build --turbo"
  }
}

Check the Next.js Turbopack docs for current status.

What gets faster

Cold start

Starting the dev server:

# Without Turbopack
$ next dev
▲ Next.js 15.0.0
- Local: http://localhost:3000
Ready in 8.2s

# With Turbopack
$ next dev --turbo
▲ Next.js 15.0.0 (Turbopack)
- Local: http://localhost:3000
Ready in 1.1s

Hot Module Replacement

After editing a file:

The improvement is most noticeable in large codebases.

First page load

Turbopack compiles only the requested route:

# Requesting /dashboard
GET /dashboard 200 in 150ms

# Only dashboard code compiled, not entire app

Feature support

Turbopack supports all major Next.js features:

What's not supported (yet)

Some Webpack-specific features have limited support:

If you rely on custom Webpack configuration, test thoroughly.

Fallback strategy

If Turbopack doesn't work with your setup:

{
  "scripts": {
    "dev": "next dev --turbo",
    "dev:webpack": "next dev"
  }
}

Run dev:webpack as a fallback when needed.

Configuration

Most configuration works the same. For Turbopack-specific options:

// next.config.js
module.exports = {
  experimental: {
    turbo: {
      rules: {
        // Custom loaders (if needed)
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
};

Monorepo usage

Turbopack works well in monorepos:

# From monorepo root
cd apps/web
npm run dev  # Uses Turbopack if configured

Combined with Turborepo for task orchestration, you get fast dev servers and cached builds.

Measuring improvement

Compare startup and HMR times:

# Time cold start
time next dev --turbo

# Watch terminal for HMR times
# "Fast Refresh in Xms"

For large projects, the difference is substantial.

Troubleshooting

"Module not found" errors

Clear the Turbopack cache:

rm -rf .next

Slow first compile

First request compiles the route. Subsequent requests are cached:

GET / 200 in 2500ms  # First request
GET / 200 in 50ms    # Cached

Plugin compatibility

If a Webpack plugin doesn't work:

1. Check if there's a Turbopack alternative
2. Use the plugin only in production builds
3. Fall back to next dev without --turbo

IDE integration

VS Code extension for Next.js works with Turbopack. Terminal output shows Turbopack-specific info:

▲ Next.js 15.0.0 (Turbopack)
- Local: http://localhost:3000
- Network: http://192.168.1.100:3000

○ Compiling / ...
✓ Compiled / in 450ms

Comparison with Vite

Use Turbopack for Next.js projects; consider Vite for other frameworks.

Summary

Turbopack dramatically speeds up Next.js development with Rust-based incremental compilation. Enable it with next dev --turbo for instant HMR and fast cold starts. Production builds are in beta. Most Next.js features work; check compatibility for custom Webpack config. The improvement is most noticeable in large codebases where traditional bundlers struggle.