Speed Up Your Next.js Build Time with Turbopack

If you're building with Next.js, chances are you’ve run into the occasional long build times, especially as your app scales. What if you could supercharge your local dev experience and optimize your iteration loop?

Say hello to Turbopack — the successor to Webpack, built by the creators of Next.js. In this blog, we’ll explore how to optimize your Next.js development and build experience using Turbopack.

What is Turbopack?

Turbopack is a new JavaScript bundler written in Rust, designed to be blazingly fast and incremental. Unlike Webpack, which recompiles everything, Turbopack only compiles what’s necessary.

• Incremental builds (only what’s changed)
• Lazy bundling (only what you’re using now)
• Built-in for Next.js 13.4+

Think of it as Vite on steroids — but made for React and Next.js.

Important Note

Turbopack is currently:

Stable for next dev
Still experimental for next build

So in this blog, we’ll focus primarily on development time optimizations.

Setting Up Turbopack in Your Next.js App

Step 1: Upgrade Next.js
Make sure your app is using Next.js 13.4 or newer:

npm install next@latest react@latest react-dom@latest

Step 2: Enable Turbopack in dev script
Update your package.json:

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

Then run:

npm run dev

Why Turbopack is Game-Changing

Let’s compare it to the old experience:

Feature	Webpack (Default)	Turbopack (New)
Cold start	🐢 Slower	⚡ Fast (~10x faster)
Rebuild on change	🐌 Often sluggish	⚡ Near instant
Incremental builds	❌ Full rebuild	✅ Smart rebuilds
Dev performance	😤 Meh	😎 Smooth and reactive

What About next build --turbo?

As of now (Next.js 14.x), --turbo is not yet supported for production builds.

Running:

next build --turbo

...will throw:

error: unknown option '--turbo'

Happy Coding