turbopack

turbopack?: { root?: string; rules?: Record<string, Rule | Rule[]>; resolveAlias?: Record<string, string | Record<string, string>>; resolveExtensions?: string[]; debugIds?: boolean; ignoreIssue?: Array<{ path: string | RegExp; title?: string | RegExp; description?: string | RegExp }> }

Turbopack is the default bundler for next dev and next build from Next.js 16. It needs no loader configuration for built-in behavior — CSS, Sass and modern JavaScript work out of the box, so css-loader, postcss-loader and babel-loader with @babel/preset-env have nothing to do.

When to reach for it

• rules for a transform Turbopack does not have, most often @svgr/webpack to import SVGs as components. Only loaders that return JavaScript are supported.
• resolveAlias to redirect a specifier: aliasing fs to an empty module for the browser, or mapping Sass's legacy ~ prefix.
• root when your monorepo has no lockfile where Turbopack expects one, or when you develop against a npm linked package outside the project.
• ignoreIssue to silence a known warning, such as an optional dependency inside a try/catch require().

What trips people up

resolveExtensions overwrites the default list — omit .tsx or .js and resolution breaks everywhere. Rule globs match the file name unless the pattern contains /, in which case they match the project-relative path. And a leftover webpack config fails next build outright, including one a plugin added on your behalf.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

export default nextConfig

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    resolveAlias: {
      fs: {
        browser: './empty.ts', // prefer fixing the import instead
      },
      '~*': '*', // legacy Sass tilde imports
    },
  },
}

export default nextConfig

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        condition: { not: 'foreign' },
        loaders: [
          {
            loader: '@svgr/webpack',
            options: { icon: true },
          },
        ],
        as: '*.js',
      },
    },
  },
}

export default nextConfig

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    ignoreIssue: [
      {
        path: '**/lib/optional-feature/**',
        title: 'Module not found',
      },
    ],
  },
}

export default nextConfig