In my previous post, I promised practical deep dives. This is the first one. Today we talk about Turbopack in Next.js: what it is, why the Next.js team built it, how to use it, and a simple real example you can try in your own project.

If you are a junior developer, don’t worry. I will keep the language simple and explain each step clearly.

Table of Contents

• 1. What Is Turbopack?
• 2. Why Did Next.js Build Turbopack?
• 3. How to Use Turbopack in Next.js
• 4. Install and Run: Step by Step
• 5. Practical Example: Faster Dev With a Real Page
• 6. Common Notes and Troubleshooting
• 7. Conclusion

1. What Is Turbopack?

Turbopack is a modern bundler that is built into Next.js. A bundler takes your files (JavaScript, TypeScript, CSS, images, etc.), processes them, and prepares them for the browser.

Turbopack is written in Rust and is designed to be fast, especially during development. It focuses on two things: faster startup and faster updates when you edit code.

2. Why Did Next.js Build Turbopack?

Next.js apps can become large. When an app grows, a slow bundler can make your daily work painful. Turbopack was built to push performance and make development feel smooth even for big projects.

The Next.js team highlights a few main reasons behind Turbopack:

• Unified graph: Next.js supports multiple output environments (like client and server). Turbopack uses one unified dependency graph for all environments.
• Bundling in development: Some tools rely on native ESM and make many network requests. That can be slow for big apps. Turbopack bundles in dev, but in an optimized way.
• Incremental computation: It caches work and avoids repeating it. When you change one file, it updates only what is needed.
• Lazy bundling: It bundles only what is requested by the dev server. This can reduce initial compile time and memory usage.

3. How to Use Turbopack in Next.js

In the latest Next.js versions, Turbopack is the default bundler. That means you usually do not need any special setup. If you run next dev, you are already using Turbopack.

Your scripts can stay simple like this:

// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

If you ever need to use Webpack instead (for example, for a specific plugin or setup), you can opt in with the --webpack flag:

// package.json
{
  "scripts": {
    "dev": "next dev --webpack",
    "build": "next build --webpack",
    "start": "next start --webpack"
  }
}

4. Install and Run: Step by Step

Let’s do a quick setup from scratch. If you already have a project, you can skip to the practical example section.

Step 1: Create a new Next.js app:

npx create-next-app@latest my-turbopack-app

Step 2: Go into the folder and run the dev server:

cd my-turbopack-app
npm run dev

That’s it. Because Turbopack is built into Next.js, you don’t install a separate bundler. Next.js uses it under the hood.

5. Practical Example: Faster Dev With a Real Page

Now let’s build a tiny example that shows why Turbopack matters. The goal is simple: create a page and a component, then update it and feel how fast the refresh is.

Create a component file at app/components/BigCard.tsx:

// app/components/BigCard.tsx
export default function BigCard({ title }: { title: string }) {
  return (
    <div style={{ padding: 16, border: '1px solid #ddd', borderRadius: 12 }}>
      <h2 style={{ margin: 0 }}>{title}</h2>
      <p style={{ marginTop: 8 }}>
        This is a simple component. Try changing this text while the dev server is running.
      </p>
    </div>
  );
}

Then use it in your home page at app/page.tsx:

// app/page.tsx
import BigCard from './components/BigCard';

export default function HomePage() {
  return (
    <main style={{ padding: 24 }}>
      <h1>Testing Turbopack</h1>
      <p>Open this page, then edit BigCard.tsx and save.</p>
      <BigCard title="Hello from Turbopack" />
    </main>
  );
}

Run your app:

npm run dev

Open the browser, then edit the text inside BigCard.tsx and save. You should see the update almost instantly. Turbopack rebuilds only what changed, not the whole project.

If you don’t notice a big visual difference, that’s normal. Turbopack’s main benefit is not flashy UI changes — it’s how fast and quietly it reacts to your edits. The real improvement is in developer feedback time.

To really feel the difference, try this: open your browser’s DevTools and keep an eye on the terminal where next dev is running. Now make several quick changes to BigCard.tsx — change text, add a new element, or adjust styles. With Turbopack, updates appear almost instantly, and you won’t see long rebuild logs or full recompiles.

In larger projects, this becomes even more noticeable. Turbopack rebuilds only the affected module instead of reprocessing the entire app. That means faster refresh, fewer interruptions, and a smoother development flow — especially when your app has many pages and components.

6. Common Notes and Troubleshooting

Turbopack supports many common features out of the box, but some advanced setups can still require Webpack.

• If you use a tool or configuration that is not supported, Next.js may warn you and suggest using Webpack.
• In Next.js 16, the configuration option is named turbopack (older versions used experimental.turbo).
• For many apps, you don’t need custom loaders. Turbopack has built-in support for CSS and modern JS/TS.

A good workflow is: use Turbopack for daily development, and switch to Webpack only if you hit a real blocker.

7. Conclusion

Turbopack is Next.js’s modern bundler built for speed. The Next.js team built it to make large apps faster to work with, using ideas like unified graphs, incremental computation, and lazy bundling.

The best part is that you usually don’t need to install anything. Just run next dev and you’re using it. Try the practical example above in your own project and feel the difference.