What is Turbopack in Next.js and how does it compare to Webpack?

Q: What is Turbopack in Next.js and how does it compare to Webpack?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First Webpack is a printing press that reprints the whole page when you fix one typo, and has decades of add-ons. Turbopack is a press that remembers every letter it has set and only resets the ones that changed, but it does not accept every old add-on. Next.js 16 made the new press standard and keeps the old one in the back room for anyone who still needs its attachments. ## 2. The Core Idea 📌 **Interview term: Turbopack

The problem

Question presented to candidate: "What is Turbopack, is it production ready, and what should a team with a custom Webpack configuration check before relying on it?"

What a strong answer should cover:

Turbopack is an incremental bundler written in Rust, built into Next.js; since Next.js 16 it is the default for both next dev and next build.
Its speed comes from incremental computation and caching at the function level, so changes recompute only what depends on them.
Webpack is still available with --webpack.
A custom webpack() function in next.config is never called by Turbopack, and a plain next build that finds one with no turbopack key stops with an error rather than ignoring it: common needs have built-in support or turbopack.rules for Webpack loaders; Webpack plugins are not supported.
Configure it under the turbopack key (for example rules, resolveAlias, root); file-system caching, on by default for dev since 16.1 and for builds since 16.3, speeds up restarts.

Clarifying questions expected:

"Does next.config have a webpack function or plugins?" — those need a migration or --webpack.
"Which loaders are used?" — many work through turbopack.rules.

Code / implementation expected: Yes — moving a loader to turbopack.rules, and the opt-out flag.

nextjs
turbopack
webpack
bundler

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

Webpack is a printing press that reprints the whole page when you fix one typo, and has decades of add-ons. Turbopack is a press that remembers every letter it has set and only resets the ones that changed, but it does not accept every old add-on. Next.js 16 made the new press standard and keeps the old one in the back r

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

Moving an SVG loader from webpack() to turbopack.rules

// next.config.ts (before: only runs with --webpack)
const before = {
  webpack(config: any) {
    config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"] });
    return config;
  },
};

// next.config.ts (after: works with Turbopack, the Next.js 16 default)
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      "*.svg": { loaders: ["@svgr/webpack"], as: "*.js" },
    },
  },
};
export default nextConfig;

// still need Webpack for an unsupported plugin?
//   next build --webpack

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.