Migrating to Turbopack: Next.js 16 webpack to Turbopack

Next.js 16 ships with Turbopack as the default bundler — no longer experimental, fully stable for both development and production. If you have custom webpack configurations, here's what you need to know about the migration.

What's Different with Turbopack

• Builds are 2-5x faster than webpack
• Fast Refresh is 5-10x faster
• Native Rust-based bundling
• New configuration object (not webpack.config.js)

The turbopack Configuration Object

Instead of webpack plugins, use the turbopack config object in next.config.ts:

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    // Replace webpack aliases
    resolveExtensions: ['.tsx', '.ts', '.jsx', '.js'],
    // Custom SSR loaders
    loaders: {
      // Define custom loaders here
    },
  },
}

export default nextConfig

Common Migration Scenarios

Custom CSS Loaders

Next.js 16 handles CSS natively. Remove custom css-loader configurations.

Environment Variables

The define plugin is replaced with Next.js built-in env config:

// next.config.ts
export default {
  env: {
    API_URL: process.env.API_URL,
  },
}

Asset Handling

Turbopack handles assets automatically. Remove file-loader configurations.

Verifying Turbopack is Working

Run your dev server — you'll see "Turbopack" in the output:

▲ Next.js 16.x.x (Turbopack)

Rollback Option

If needed, you can temporarily use webpack:

npx next dev --webpack

Key Takeaways

• Turbopack is now the default — no config needed
• Use turbopack config object instead of webpack
• Remove custom css/file/asset loaders
• Build times are significantly faster