Turbopack mit Claude Code: Der schnellste JavaScript-Bundler 2026

{
  "scripts": {
    "dev":   "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

import type { NextConfig } from 'next'

const config: NextConfig = {
  experimental: {
    turbo: {
      // Eigene Datei-Transformer
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.tsx'
        },
        '*.yaml': {
          loaders: ['yaml-loader'],
          as: '*.js'
        }
      },
      // Alias-Aufloesung (ersetzt Webpack resolve.alias)
      resolveAlias: {
        '@': './src',
        '~components': './src/components',
        '~lib': './src/lib'
      }
    }
  }
}

export default config

# Lass Claude Code die tsconfig-paths automatisch migrieren
claude "Lese meine tsconfig.json paths und erstelle daraus \
die passenden turbopack resolveAlias-Eintraege in next.config.ts"

# Build-Zeiten messen
time npx next dev --turbo

# Output-Beispiel:
# ✓ Ready in 1847ms (vorher: 41.3s mit Webpack)
# ✓ Compiled /page in 234ms (vorher: 8.7s)

claude "Analysiere warum meine HMR-Updates in dieser Komponente \
langsamer als 100ms sind. Schau auf circular imports und re-export patterns."

const config: NextConfig = {
  bundler: 'turbopack',  // Turbopack fuer next build
  // ... weitere Optionen
}

npm install --save-dev @svgr/webpack

import type { NextConfig } from 'next'

const config: NextConfig = {
  experimental: {
    turbo: {
      rules: {
        // SVG → React-Komponente
        '*.svg': {
          loaders: [
            {
              loader: '@svgr/webpack',
              options: {
                svgo: true,
                titleProp: true,
                ref: true
              }
            }
          ],
          as: '*.tsx'
        }
      }
    }
  }
}
export default config

const config: NextConfig = {
  experimental: {
    turbo: {
      rules: {
        // YAML → JavaScript-Objekt
        '*.yaml': {
          loaders: ['yaml-loader'],
          as: '*.js'
        },
        '*.yml': {
          loaders: ['yaml-loader'],
          as: '*.js'
        }
      }
    }
  }
}

/**
 * Custom Turbopack-kompatibler Loader
 * Transformiert .data-Dateien in JS-Exporte
 */
module.exports = function myTransformer(source, map, meta) {
  // source = Dateiinhalt als String
  const parsed = parseMyFormat(source)
  const output = `export default ${JSON.stringify(parsed)}`
  this.callback(null, output, map)
}

# Schritt 1: Analyse
claude "Lese meine next.config.js webpack-Konfiguration und erstelle \
eine Migrations-Checkliste mit geschatztem Aufwand pro Punkt"

# Schritt 2: Automatische Ubersetzung
claude "Konvertiere meine webpack resolve.alias und module.rules \
in Turbopack-kompatible next.config.ts-Syntax"

# Schritt 3: Kompatibilitatspruefung
claude "Prufe welche meiner npm-Pakete Turbopack noch nicht vollstandig \
unterstuetzen und schlage Alternativen vor"

const config: NextConfig = {
  // Webpack bleibt fuer next build aktiv
  webpack: (webpackConfig) => {
    // Legacy Webpack-Konfiguration bleibt erhalten
    return webpackConfig
  },
  experimental: {
    // Turbopack NUR im Dev-Server
    turbo: {
      rules: { /* ... */ }
    }
  }
}

{
  "$schema": "https://turbo.build/schema.json",
  "remoteCache": {
    "enabled": true
  },
  "pipeline": {
    "build": {
      "outputs": [".next/**", "!.next/cache/**"],
      "dependsOn": ["^build"]
    },
    "test": {
      "outputs": [],
      "dependsOn": ["build"]
    },
    "lint": {
      "outputs": []
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

# Turbo global installieren
npm install --global turbo

# Mit Vercel Remote Cache verbinden
npx turbo login
npx turbo link

# Build mit Remote Cache
turbo build

# Output-Beispiel bei Cache-Hit:
# • Packages in scope: my-app
# • Running build in 2 packages
# • Remote caching enabled
# my-app:build: cache hit, replaying output 72ms
# Tasks: 1 successful, 1 total
# Cached: 1 cached, 1 total
# Time: 0.891s >>> FULL TURBO

# Self-hosted Turborepo Remote Cache
TURBO_API=https://cache.meine-firma.de
TURBO_TOKEN=dein-geheimer-token
TURBO_TEAM=mein-team-slug

claude "Analysiere warum meine Turbo-Builds keinen Cache-Hit erzielen. \
Prufe turbo.json outputs, .gitignore und TURBO_REMOTE_CACHE_SIGNATURE_KEY"

# Lokalen Turbo-Cache leeren
turbo build --force

# Oder manuell:
rm -rf .turbo/cache
rm -rf .next/cache