Docs: How to get started with turbopack?

[badtant]

What is the documentation issue?

Hi,

I'm updating to 15.0.1 and want to try turbopack when developing. I cant get it going though and the docs doesn't seem to help.

I'm adding --turbo to next dev --turbo (should it be --turbo or --turbopack?)
Then I'm getting this message "Webpack is configured while Turbopack is not, which may cause problems."
I'm looking at the link provided with the message (https://nextjs.org/docs/app/api-reference/next-config-js/turbo) and its suggesting to add turbo to my next config.

I'm adding turbo: {} and still getting the same message...

• turbo isn't a part of the type NextConfig which confused me alot
• I have webpack conf, should I duplicate that into turbo or should I migrate it to turbo or should I have both?

Thanks

Is there any context that might help us understand?

Nothing more to add

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/api-reference/next-config-js/turbo

[samcx]

@badtant Webpack configuration is not supported in Turbopack, but some loaders are supported → https://nextjs.org/docs/architecture/turbopack#unsupported-features.

[aniruddhaadak80]

Hey @badtant ,

To start with Turbopack in Next.js:

1. Enable Turbopack:
   Add turbo: {} in your next.config.js. Use next dev --turbo to start the development server with Turbopack.

2. Migration:
   If you have custom Webpack configuration, migrate it to Turbopack if possible, as Webpack and Turbopack configurations might conflict.

3. Config Reference:
   Refer to the official documentation for specifics on Turbopack configuration and troubleshooting.

Thanks .

[badtant]

Ok, but I'm still getting this message:
⚠ Invalid next.config.ts options detected:
⚠ Unrecognized key(s) in object: 'turbo'

[samcx]

@badtant Which version of Next.js are you using?

[badtant]

15.0.1

[samcx]

@badtant It's working fine for me. Did you make sure to add experimental?

[badtant]

ah, I didn't see it should be under experimental. thanks!

[ParwarYasinQadr]

i am using latest version of next with 20 version of node.js I will get this error I do not know why and when I remove the turbo in my package.json file it work fine what is the issue could you help me

[SUMIT-WEBDEV]

+1

[DENNIS-CODES]

⚠ The config property experimental.turbo is deprecated. Move this setting to config.turbopack as Turbopack is now stable.
Next.js 15.3

const nextConfig: NextConfig = {
 /* config options here */
 reactStrictMode: true,
 compiler: {
   styledComponents: true,
 },
 experimental: {
   turbo: {
     resolveAlias: {
       underscore: "lodash",
     },
     resolveExtensions: [".mdx", ".tsx", ".ts", ".jsx", ".js", ".json"],
   },
 },
};

export default nextConfig;

[lyonscrawl]

if you are on the last version of next 15.3

const nextConfig: NextConfig = {
/* config options here /
turbopack: {
rules: {
".svg": {
loaders: ["@svgr/webpack"],
as: "*.js",
},
},
},
};

[bloodykheeng]

just change ur next.cnfig.ts and add turbopark entry then remove turbo from experimental
bellow is my config before with error and after i solved it

before

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fonts.googleapis.com"
      },
      {
        protocol: "http",
        hostname: "127.0.0.1"
      },
      {
        protocol: "http",
        hostname: "localhost"
      },
      {
        protocol: "https",
        hostname: "res.cloudinary.com"
      }
    ]
  },
  /* config options here */
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            icon: true
          }
        }
      ]
    });
    return config;
  },
  experimental: {
    turbo: {
      rules: {
        "*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.js"
        }
      }
    }
  }
};

export default nextConfig;

then here is the updated config that works for "next": "15.4.6",

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fonts.googleapis.com"
      },
      {
        protocol: "http",
        hostname: "127.0.0.1"
      },
      {
        protocol: "http",
        hostname: "localhost"
      },
      {
        protocol: "https",
        hostname: "res.cloudinary.com"
      }
    ]
  },
  /* config options here */
   turbopack: {
      rules: {
        "*.svg": {
          loaders: ["@svgr/webpack"],
          as: "*.js"
        }
      }
    },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        {
          loader: "@svgr/webpack",
          options: {
            icon: true
          }
        }
      ]
    });
    return config;
  },
   
  
};

export default nextConfig;