turbopack

Move webpack customizations to the top-level `turbopack` key in next.config.ts. Use `turbopack.resolveAlias` for resolve aliases and `turbopack.rules` for custom loaders like @svgr/webpack. Remove any `webpack()` function since Turbopack ignores it.

Turbopack is written in Rust with constant-time HMR and native React Server Components support, while webpack is JavaScript-based with a larger loader ecosystem. Turbopack is the default bundler in Next.js 16, but webpack remains supported via `bundler: 'webpack'`.

Yes, Turbopack handles CSS, CSS Modules, and Sass natively without loaders. Install the `sass` package and import `.scss` files directly. PostCSS config files are read automatically, and Tailwind CSS v4 works with zero configuration.

Common causes include leftover `webpack()` config functions, invalid `turbopack.rules` loaders, Node.js built-ins imported in client or edge bundles, and missing `turbopack.resolveAlias` entries. Check each of these and compare against a webpack build to isolate the issue.

Use webpack when you rely on custom loaders with no Turbopack equivalent, complex plugins like ModuleFederationPlugin, or unsupported features like custom externals functions. Opt out by setting `bundler: 'webpack'` in next.config.ts.

Run builds or dev server with `NEXT_TURBOPACK_TRACING=1` to generate a trace.json file. Open it in chrome://tracing or Perfetto to inspect module-level timing, slow transforms, and cache misses.