Fix Next.js Turbopack conflict with webpack configuration

Problem

Next.js 15+ uses Turbopack by default in development. If next.config.ts has a webpack key but no turbopack equivalent, the build fails:

ERROR: This build is using Turbopack, with a 'webpack' config and no 'turbopack' config.
Turbopack does not support custom webpack configuration. To continue using your webpack
configuration, set "turbopack" to false in next.config.ts, or configure Turbopack using
the 'turbopack' key in next.config.ts.

The config file with only a webpack key:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  webpack: (config) => {
    config.resolve.alias["@"] = path.resolve(__dirname, "src");
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });
    return config;
  },
};

export default nextConfig;

Solution

Option 1: Add equivalent Turbopack configuration (recommended)

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  turbopack: {
    resolveAlias: {
      "@": "./src",
    },
    rules: {
      "*.svg": {
        loaders: ["@svgr/webpack"],
        as: "*.js",
      },
    },
  },
  webpack: (config) => {
    // Keep existing webpack config for production builds
    config.resolve.alias["@"] = path.resolve(__dirname, "src");
    config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"] });
    return config;
  },
};

export default nextConfig;

Option 2: Disable Turbopack and keep webpack only

Add turbopack: false to your existing config to opt out of Turbopack entirely:

const nextConfig: NextConfig = {
  turbopack: false,
  webpack: (config) => {
    // existing webpack config unchanged
    return config;
  },
};

Why It Works

Turbopack is a separate bundler from webpack and does not read the webpack configuration key. When Turbopack is active (default in next dev for Next.js 15+), it needs its own configuration under the turbopack key. The turbopack key uses a declarative format with resolveAlias and rules instead of webpack's imperative callback. Setting turbopack: false explicitly opts out of Turbopack and falls back to webpack for development builds.

Context

Next.js 15+ enables Turbopack by default for next dev; production builds (next build) still use webpack
Common webpack customizations that need migration: SVG loaders, path aliases, custom module rules, and node: polyfills
Path aliases defined in tsconfig.json (paths) are automatically resolved by both bundlers without extra config
Run next dev --turbo or next dev --no-turbo to explicitly toggle Turbopack regardless of config