0PricingLogin▼
Next.js 15 Fullstack (App Router + Server Actions) · Lesson

Turbopack and Compiler Configuration Deep Dive

Tune Turbopack, transforms, and the SWC-based compiler for faster builds and smaller output.

Why Turbopack Exists

Next.js 15 ships Turbopack as the default bundler for next dev. It was built in Rust to replace the JavaScript-based Webpack pipeline that powered Next.js for years.

The core problem Webpack faced at scale: every file change triggered a JavaScript graph traversal and re-evaluation. At 10,000 modules, a single edit could take 8–15 seconds before HMR landed in the browser.

Turbopack solves this with three architectural bets:

  • Incremental computation — only the modules affected by a change are re-evaluated, not the whole graph.
  • Parallel compilation — Rust's fearless concurrency lets multiple CPU cores transform files simultaneously.
  • Persistent caching — transform results are stored on disk and survive process restarts.

The result: cold start times drop by roughly 50–75% on large apps, and HMR latency falls to single-digit milliseconds in most cases.

Enabling Turbopack in next.config.ts

In Next.js 15, next dev --turbopack is the recommended way to opt in during development. For production builds, Webpack remains the default until Turbopack reaches full parity, so you control the flag per command in package.json.

You can also embed Turbopack options directly inside next.config.ts under the experimental.turbo key (renamed to turbopack in the stable API).

Key points to keep in mind:

  • The turbopack key only affects next dev; production builds still use Webpack unless you pass --turbopack to next build (experimental in v15).
  • Options in turbopack are merged on top of Turbopack's built-in defaults — you never have to replicate the full config.
  • The TypeScript config file (next.config.ts) gives you full type safety for these options via the NextConfig type.
// next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  turbopack: {
    // Turbopack-specific options go here
    // (rules, resolveAlias, resolveExtensions, etc.)
  },
};

export default config;

All lessons in this course

  1. Analyzing and Shrinking the Client Bundle
  2. Turbopack and Compiler Configuration Deep Dive
  3. Module Boundaries with server-only and client-only
  4. Dynamic Imports, Code Splitting, and Lazy Hydration
← Back to Next.js 15 Fullstack (App Router + Server Actions)