Turbopack Cheatsheet

_

Turbopack - Der Incremental Bundler_

Turbopack ist ein inkrementaler Bündelr optimiert für JavaScript und TypeScript, geschrieben in Rust. Erstellt von Vercel, ist es entworfen, um der Nachfolger zu Webpack mit 10x schnelleren Updates als Vite und 700x schneller als Webpack.

_

_ 📋 Alle Befehle kopieren_HTML_TAG_76____ 📄 Generieren PDF_HTML_TAG_78____

_

_

Inhaltsverzeichnis - (#introduction) - (#Installation) - (#getting-started) - Next.js Integration - (#configuration) - (#Entwicklungsserver) - (#build-Prozess) - (#assethandling) - CSS Support - (#typescript-support) - Umweltvariablen - (Plugins) (#plugins) - (#performance) - (Migration) (#migration) - (Troubleshooting) - (#best-practices)

Einleitung

Was ist Turbopack?

Turbopack ist ein inkrementaler Bündelr optimiert für JavaScript und TypeScript, geschrieben in Rust von den Schöpfern von Webpack und Next.js. Es stellt eine grundlegende Verschiebung in der Funktionsweise der Bündeler dar, die sich auf die Inkrementalrechnung konzentriert, um eine beispiellose Geschwindigkeit zu erreichen.

Schlüsselmerkmale

• **Inkrementelle Berechnung*: Nur Prozesse, die sich verändert haben
• Rust Performance: In Rust gebaut für maximale Geschwindigkeit
• **Hot Modul Ersatz*: Instant Updates während der Entwicklung
• **Framework Agnostic*: Funktioniert mit jedem JavaScript-Rahmen
• **Next.js Integration*: Erstklassige Unterstützung für Next.js-Anwendungen
• **TypeScript Native*: Eingebaute TypeScript-Unterstützung ohne Konfiguration

Performance Benchmarks

# Turbopack vs other bundlers (startup time)
Turbopack: ~1.8s
Vite: ~11.4s
Webpack: ~16.5s

# Hot updates
Turbopack: ~6ms
Vite: ~30ms
Webpack: ~612ms

• Installation

Next.js Integration (empfohlen)

# Create new Next.js app with Turbopack
npx create-next-app@latest my-app

# Navigate to project
cd my-app

# Start with Turbopack
npm run dev -- --turbo
```_

### Existing Next.js Project
```bash
# Update Next.js to latest version
npm install next@latest

# Start development with Turbopack
npm run dev -- --turbo

# Or update package.json scripts
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}
```_

### Standalone Installation (Alpha)
```bash
# Install Turbopack CLI (experimental)
npm install -g @turbo/pack

# Or locally
npm install --save-dev @turbo/pack
```_

### Verify Installation
```bash
# Check Next.js version
npx next --version

# Verify Turbopack is working
npm run dev -- --turbo
# Look for "Turbopack" in the startup logs
```_

Gestartet

### Basic Next.js Setup mit Turbopack
```bash
# Create new project
npx create-next-app@latest my-turbo-app --typescript --tailwind --eslint --app

# Navigate to project
cd my-turbo-app

# Start with Turbopack
npm run dev -- --turbo
```_

### Projektstruktur
```bash
my-turbo-app/
├── app/                 # App Router (Next.js 13+)
│   ├── globals.css
│   ├── layout.tsx
│   ├── page.tsx
│   └── components/
├── public/              # Static assets
├── next.config.js       # Next.js configuration
├── package.json
├── tailwind.config.js
└── tsconfig.json
```_

### Grundkonfiguration
```javascript
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // Turbopack configuration
      loaders: {
        '.svg': ['@svgr/webpack'],
      },
      resolveAlias: {
        '@': './src',
        '@components': './src/components',
      },
    },
  },
}

module.exports = nextConfig
```_

### Erste Komponente
```tsx
// app/components/Counter.tsx
'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold mb-4">Counter: {count}</h2>
      <div className="space-x-2">
        <button 
          onClick={() => setCount(count + 1)}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Increment
        </button>
        <button 
          onClick={() => setCount(count - 1)}
          className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
        >
          Decrement
        </button>
      </div>
    </div>
  )
}
```_

In den nächsten Jahren

### App Router mit Turbopack
```tsx
// app/layout.tsx
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Turbopack App',
  description: 'Built with Next.js and Turbopack',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <main className="container mx-auto px-4 py-8">
          {children}
        </main>
      </body>
    </html>
  )
}
```_

```tsx
// app/page.tsx
import Counter from './components/Counter'
import Link from 'next/link'

export default function Home() {
  return (
    <div className="space-y-8">
      <h1 className="text-4xl font-bold text-center">
        Welcome to Turbopack
      </h1>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="space-y-4">
          <h2 className="text-2xl font-semibold">Features</h2>
          <ul className="list-disc list-inside space-y-2">
            <li>⚡ Lightning fast HMR</li>
            <li>🦀 Built in Rust</li>
            <li>📦 Incremental bundling</li>
            <li>🔥 Hot module replacement</li>
          </ul>
        </div>

        <Counter />
      </div>

      <div className="text-center">
        <Link 
          href="/about" 
          className="text-blue-500 hover:text-blue-700 underline"
        >
          Learn more about Turbopack
        </Link>
      </div>
    </div>
  )
}

Pages Router mit Turbopack

// pages/_app.tsx
import type { AppProps } from 'next/app'
import '../styles/globals.css'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
```_

```tsx
// pages/index.tsx
import { useState } from 'react'
import Head from 'next/head'

export default function Home() {
  const [message, setMessage] = useState('Hello Turbopack!')

  return (
    <>
      <Head>
        <title>Turbopack Demo</title>
        <meta name="description" content="Turbopack demonstration" />
      </Head>

      <div className="container mx-auto px-4 py-8">
        <h1 className="text-4xl font-bold mb-8">{message}</h1>

        <button
          onClick={() => setMessage('Turbopack is fast!')}
          className="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600"
        >
          Update Message
        </button>
      </div>
    </>
  )
}

API Routen

// app/api/hello/route.ts (App Router)
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  return NextResponse.json({ 
    message: 'Hello from Turbopack API!',
    timestamp: new Date().toISOString()
  })
}

export async function POST(request: NextRequest) {
  const body = await request.json()

  return NextResponse.json({
    received: body,
    processed: true
  })
}
```_

```typescript
// pages/api/hello.ts (Pages Router)
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  message: string
  timestamp: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ 
    message: 'Hello from Turbopack API!',
    timestamp: new Date().toISOString()
  })
}

Konfiguration

Basic Turbopack Konfiguration

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // Enable Turbopack
      rules: {
        // Custom rules for file processing
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },

      // Resolve aliases
      resolveAlias: {
        '@': './src',
        '@components': './src/components',
        '@utils': './src/utils',
        '@styles': './src/styles',
      },

      // Resolve extensions
      resolveExtensions: [
        '.mdx',
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.json',
      ],

      // Module resolution
      resolveModules: [
        'node_modules',
        './src',
      ],
    },
  },
}

module.exports = nextConfig
```_

### Erweiterte Konfiguration
```javascript
// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      // Loader configuration
      loaders: {
        '.md': ['raw-loader'],
        '.svg': ['@svgr/webpack'],
        '.graphql': ['graphql-tag/loader'],
      },

      // Resolve configuration
      resolveAlias: {
        '@': './src',
        '@components': './src/components',
        '@hooks': './src/hooks',
        '@utils': './src/utils',
        '@types': './src/types',
        '@styles': './src/styles',
        '@public': './public',
      },

      // Memory optimization
      memoryLimit: 4096,

      // Experimental features
      useSwcLoader: true,
      optimizeCss: true,
    },

    // Other Next.js experimental features
    appDir: true,
    serverComponentsExternalPackages: ['@prisma/client'],
  },

  // Standard Next.js configuration
  images: {
    domains: ['example.com'],
  },

  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
  },
}

module.exports = nextConfig
```_

### TypeScript Configuration
```json
// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@types/*": ["./src/types/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```_

Der Entwicklungsserver

### Starting Development Server
```bash
# Start with Turbopack
npm run dev -- --turbo

# Custom port
npm run dev -- --turbo --port 3001

# Custom hostname
npm run dev -- --turbo --hostname 0.0.0.0

# Enable experimental features
npm run dev -- --turbo --experimental-https
```_

### Entwicklungsserver Optionen
```json
// package.json
{
  "scripts": {
    "dev": "next dev --turbo",
    "dev:debug": "next dev --turbo --inspect",
    "dev:port": "next dev --turbo --port 3001",
    "dev:https": "next dev --turbo --experimental-https",
    "build": "next build",
    "start": "next start"
  }
}
```_

### Hot Module Ersatz
```tsx
// components/LiveComponent.tsx
'use client'

import { useState, useEffect } from 'react'

export default function LiveComponent() {
  const [timestamp, setTimestamp] = useState(new Date().toLocaleTimeString())

  useEffect(() => {
    const interval = setInterval(() => {
      setTimestamp(new Date().toLocaleTimeString())
    }, 1000)

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="p-4 border-2 border-dashed border-blue-300 rounded-lg">
      <h3 className="text-lg font-semibold mb-2">Live Component</h3>
      <p className="text-sm text-gray-600">
        Current time: {timestamp}
      </p>
      <p className="text-xs text-green-600 mt-2">
        ✅ This component updates instantly with Turbopack HMR
      </p>
    </div>
  )
}
```_

### Entwicklung Debugging
```bash
# Enable debugging
npm run dev -- --turbo --inspect

# Debug with specific port
npm run dev -- --turbo --inspect=9229

# Verbose logging
DEBUG=turbopack* npm run dev -- --turbo
```_

Der Prozess

### Production Build
```bash
# Build for production
npm run build

# Build with analysis
npm run build -- --analyze

# Build with debug info
npm run build -- --debug
```_

### Konfigurieren erstellen
```javascript
// next.config.js
const nextConfig = {
  // Production optimizations
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
  },

  // Output configuration
  output: 'standalone', // For Docker deployments

  // Image optimization
  images: {
    unoptimized: false,
    domains: ['example.com'],
  },

  // Experimental Turbopack for build (future)
  experimental: {
    turbo: {
      // Build-specific configuration
    },
  },
}

module.exports = nextConfig
```_

### Analyse erstellen
```bash
# Install bundle analyzer
npm install --save-dev @next/bundle-analyzer

# Configure analyzer
# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)

# Run analysis
ANALYZE=true npm run build
```_

### Custom Build Scripts
```json
// package.json
{
  "scripts": {
    "build": "next build",
    "build:analyze": "ANALYZE=true next build",
    "build:standalone": "next build && next export",
    "build:debug": "DEBUG=1 next build",
    "postbuild": "next-sitemap"
  }
}
```_

Artikel 1

### Static Assets
```tsx
// components/ImageComponent.tsx
import Image from 'next/image'
import logo from '../public/logo.png'

export default function ImageComponent() {
  return (
    <div className="space-y-4">
      {/* Static import */}
      <Image
        src={logo}
        alt="Logo"
        width={200}
        height={100}
        priority
      />

      {/* Dynamic import */}
      <Image
        src="/images/hero.jpg"
        alt="Hero"
        width={800}
        height={400}
        className="rounded-lg"
      />
    </div>
  )
}
```_

### SVG Handhabung
```javascript
// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}
```_

```tsx
// components/IconComponent.tsx
import { ReactComponent as Icon } from '../assets/icon.svg'

export default function IconComponent() {
  return (
    <div className="flex items-center space-x-2">
      <Icon className="w-6 h-6 text-blue-500" />
      <span>SVG Icon</span>
    </div>
  )
}

Schrift laden

// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.className} ${robotoMono.variable}`}>
      <body>{children}</body>
    </html>
  )
}
```_

### Dynamische Importe
```tsx
// components/DynamicComponent.tsx
import dynamic from 'next/dynamic'
import { Suspense } from 'react'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false,
})

const ChartComponent = dynamic(() => import('./Chart'), {
  suspense: true,
})

export default function DynamicComponent() {
  return (
    <div className="space-y-8">
      <HeavyComponent />

      <Suspense fallback={<div>Loading chart...</div>}>
        <ChartComponent />
      </Suspense>
    </div>
  )
}
```_

CSS-Unterstützung

### Tailwind CSS
```bash
# Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```_

```javascript
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
      },
    },
  },
  plugins: [],
}

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors;
  }
}

CSS Modules

/* components/Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.primary {
  background-color: #3b82f6;
  color: white;
}

.primary:hover {
  background-color: #2563eb;
}

.secondary {
  background-color: #64748b;
  color: white;
}
```_

```tsx
// components/Button.tsx
import styles from './Button.module.css'
import { ReactNode } from 'react'

interface ButtonProps {
  children: ReactNode
  variant?: 'primary' | 'secondary'
  onClick?: () => void
}

export default function Button({ 
  children, 
  variant = 'primary', 
  onClick 
}: ButtonProps) {
  return (
    <button 
      className={`${styles.button} ${styles[variant]}`}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

Stilierte Komponenten

# Install styled-components
npm install styled-components
npm install -D @types/styled-components
```_

```tsx
// components/StyledButton.tsx
'use client'

import styled from 'styled-components'

const StyledButton = styled.button<{ variant: 'primary' | 'secondary' }>`
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  background-color: ${props => 
    props.variant === 'primary' ? '#3b82f6' : '#64748b'
  };
  color: white;

  &:hover {
    background-color: ${props => 
      props.variant === 'primary' ? '#2563eb' : '#475569'
    };
  }
`

export default function Button({ 
  children, 
  variant = 'primary',
  ...props 
}: {
  children: React.ReactNode
  variant?: 'primary' | 'secondary'
  onClick?: () => void
}) {
  return (
    <StyledButton variant={variant} {...props}>
      {children}
    </StyledButton>
  )
}

Sass/SCSS Unterstützung

# Install Sass
npm install -D sass
```_

```scss
// styles/components.scss
$primary-color: #3b82f6;
$secondary-color: #64748b;
$border-radius: 0.375rem;

@mixin button-base {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: $border-radius;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn {
  @include button-base;

  &--primary {
    background-color: $primary-color;
    color: white;

    &:hover {
      background-color: darken($primary-color, 10%);
    }
  }

  &--secondary {
    background-color: $secondary-color;
    color: white;

    &:hover {
      background-color: darken($secondary-color, 10%);
    }
  }
}

Unterstützung von TypScript

TypeScript Configuration

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@types/*": ["./src/types/*"],
      "@hooks/*": ["./src/hooks/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```_

### Typ Definitionen
```typescript
// src/types/index.ts
export interface User {
  id: string
  name: string
  email: string
  avatar?: string
  createdAt: Date
  updatedAt: Date
}

export interface Post {
  id: string
  title: string
  content: string
  author: User
  published: boolean
  tags: string[]
  createdAt: Date
  updatedAt: Date
}

export interface ApiResponse<T> {
  data: T
  message: string
  status: 'success' | 'error'
}

export type Theme = 'light' | 'dark' | 'system'

export interface AppConfig {
  apiUrl: string
  theme: Theme
  features: {
    auth: boolean
    analytics: boolean
    notifications: boolean
  }
}
```_

### Typierte Komponenten
```tsx
// components/UserCard.tsx
import { User } from '@/types'
import Image from 'next/image'

interface UserCardProps {
  user: User
  showEmail?: boolean
  onEdit?: (user: User) => void
  className?: string
}

export default function UserCard({ 
  user, 
  showEmail = false, 
  onEdit,
  className = ''
}: UserCardProps) {
  return (
    <div className={`p-4 border rounded-lg ${className}`}>
      <div className="flex items-center space-x-3">
        {user.avatar && (
          <Image
            src={user.avatar}
            alt={user.name}
            width={40}
            height={40}
            className="rounded-full"
          />
        )}

        <div>
          <h3 className="font-semibold">{user.name}</h3>
          {showEmail && (
            <p className="text-sm text-gray-600">{user.email}</p>
          )}
        </div>
      </div>

      {onEdit && (
        <button
          onClick={() => onEdit(user)}
          className="mt-3 text-blue-500 hover:text-blue-700"
        >
          Edit User
        </button>
      )}
    </div>
  )
}
```_

### Benutzerdefinierte Haken mit TypeScript
```typescript
// hooks/useApi.ts
import { useState, useEffect } from 'react'
import { ApiResponse } from '@/types'

interface UseApiOptions {
  immediate?: boolean
}

export function useApi<T>(
  url: string, 
  options: UseApiOptions = {}
) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const fetchData = async () => {
    setLoading(true)
    setError(null)

    try {
      const response = await fetch(url)
      const result: ApiResponse<T> = await response.json()

      if (result.status === 'success') {
        setData(result.data)
      } else {
        setError(result.message)
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'An error occurred')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    if (options.immediate !== false) {
      fetchData()
    }
  }, [url])

  return { data, loading, error, refetch: fetchData }
}
```_

Umweltvariablen

### Umweltkonfiguration
```bash
# .env.local
NEXT_PUBLIC_API_URL=http://localhost:3001/api
NEXT_PUBLIC_APP_NAME=Turbopack App
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
SECRET_KEY=your-secret-key
```_

```bash
# .env.production
NEXT_PUBLIC_API_URL=https://api.production.com
NEXT_PUBLIC_APP_NAME=Production App
DATABASE_URL=postgresql://user:password@prod-db:5432/mydb
SECRET_KEY=production-secret-key

Verwenden von Umweltvariablen

// lib/config.ts
export const config = {
  apiUrl: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api',
  appName: process.env.NEXT_PUBLIC_APP_NAME || 'My App',
  isDevelopment: process.env.NODE_ENV === 'development',
  isProduction: process.env.NODE_ENV === 'production',
}

// Server-side only
export const serverConfig = {
  databaseUrl: process.env.DATABASE_URL!,
  secretKey: process.env.SECRET_KEY!,
}
```_

```tsx
// components/ApiExample.tsx
'use client'

import { config } from '@/lib/config'
import { useEffect, useState } from 'react'

export default function ApiExample() {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch(`${config.apiUrl}/hello`)
      .then(res => res.json())
      .then(setData)
  }, [])

  return (
    <div className="p-4 border rounded-lg">
      <h3 className="font-semibold mb-2">API Response</h3>
      <p className="text-sm text-gray-600 mb-2">
        API URL: {config.apiUrl}
      </p>
      <pre className="text-xs bg-gray-100 p-2 rounded">
        {JSON.stringify(data, null, 2)}
      </pre>
    </div>
  )
}

Runtime Configuration

// next.config.js
const nextConfig = {
  env: {
    CUSTOM_KEY: process.env.CUSTOM_KEY,
    BUILD_TIME: new Date().toISOString(),
  },

  publicRuntimeConfig: {
    // Available on both server and client
    apiUrl: process.env.API_URL,
  },

  serverRuntimeConfig: {
    // Only available on server
    secretKey: process.env.SECRET_KEY,
  },
}

module.exports = nextConfig
```_

In den Warenkorb

### Current Plugin Support
```javascript
// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      // Loader configuration (limited plugin support)
      loaders: {
        '.svg': ['@svgr/webpack'],
        '.md': ['raw-loader'],
        '.graphql': ['graphql-tag/loader'],
      },

      // Rules for file processing
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}
```_

### Webpack Plugins (Fallback)
```javascript
// next.config.js
const nextConfig = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Custom webpack configuration for features not yet supported in Turbopack
    config.plugins.push(
      new webpack.DefinePlugin({
        __BUILD_ID__: JSON.stringify(buildId),
      })
    )

    return config
  },

  experimental: {
    turbo: {
      // Turbopack configuration
    },
  },
}
```_

### Future Plugin System
```javascript
// Future Turbopack plugin API (conceptual)
const nextConfig = {
  experimental: {
    turbo: {
      plugins: [
        // Future plugin system
        '@turbopack/plugin-sass',
        '@turbopack/plugin-postcss',
        ['@turbopack/plugin-custom', { options: {} }],
      ],
    },
  },
}
```_

Leistung

### Performance Benchmarks
```bash
# Development server startup
Turbopack: ~1.8s (10x faster than Vite)
Vite: ~11.4s
Webpack: ~16.5s

# Hot Module Replacement
Turbopack: ~6ms (5x faster than Vite)
Vite: ~30ms
Webpack: ~612ms (100x slower)

# Large codebase (30k modules)
Turbopack: ~1.2s startup
Webpack: ~30s startup
```_

### Performance Monitoring
```tsx
// components/PerformanceMonitor.tsx
'use client'

import { useEffect, useState } from 'react'

export default function PerformanceMonitor() {
  const [metrics, setMetrics] = useState<any>(null)

  useEffect(() => {
    if (typeof window !== 'undefined' && 'performance' in window) {
      const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming

      setMetrics({
        domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
        loadComplete: navigation.loadEventEnd - navigation.loadEventStart,
        firstPaint: performance.getEntriesByName('first-paint')[0]?.startTime,
        firstContentfulPaint: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
      })
    }
  }, [])

  if (!metrics) return null

  return (
    <div className="p-4 bg-gray-100 rounded-lg">
      <h3 className="font-semibold mb-2">Performance Metrics</h3>
      <div className="grid grid-cols-2 gap-2 text-sm">
        <div>DOM Content Loaded: {metrics.domContentLoaded?.toFixed(2)}ms</div>
        <div>Load Complete: {metrics.loadComplete?.toFixed(2)}ms</div>
        <div>First Paint: {metrics.firstPaint?.toFixed(2)}ms</div>
        <div>First Contentful Paint: {metrics.firstContentfulPaint?.toFixed(2)}ms</div>
      </div>
    </div>
  )
}
```_

### Bundle Analysis
```bash
# Install bundle analyzer
npm install --save-dev @next/bundle-analyzer

# Analyze bundle
ANALYZE=true npm run build
```_

```javascript
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const nextConfig = {
  experimental: {
    turbo: {
      // Turbopack configuration
    },
  },
}

module.exports = withBundleAnalyzer(nextConfig)

Migration

Von Webpack bis Turbopack

# Update Next.js to latest version
npm install next@latest

# Update package.json scripts
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}
```_

### Migration Checklist
- [ ] Update Next.js auf Version 13.5+
- [ ] Fügen Sie `--turbo`-Flag hinzu
- [ ] Testen Sie alle Funktionen in der Entwicklung
- [ ] Benutzerdefinierte Webpack-Konfiguration aktualisieren
- [ ] Alle Lader funktionieren richtig
- [ ] Test Hot Modul Ersatz
- [ ] Prüfen Sie die Prozesskompatibilität

### Common Migration Issues
```javascript
// Issue: Custom webpack loaders not supported
// Solution: Use Turbopack loader configuration
const nextConfig = {
  experimental: {
    turbo: {
      loaders: {
        '.custom': ['custom-loader'],
      },
    },
  },

  // Fallback to webpack for unsupported features
  webpack: (config) => {
    // Custom webpack configuration
    return config
  },
}
```_

### Gradual Migration
```javascript
// next.config.js
const nextConfig = {
  experimental: {
    turbo: {
      // Enable Turbopack for development only
    },
  },

  // Keep webpack configuration for production builds
  webpack: (config, { dev }) => {
    if (!dev) {
      // Production webpack configuration
    }
    return config
  },
}
```_

Fehlerbehebung

### Häufige Fragen

Turbopack nicht starten
```bash
# Check Next.js version
npx next --version

# Ensure version 13.5+
npm install next@latest

# Clear cache
rm -rf .next
npm run dev -- --turbo

Modul Auflösungsfragen javascript // next.config.js const nextConfig = { experimental: { turbo: { resolveAlias: { '@': './src', '@components': './src/components', }, resolveExtensions: ['.tsx', '.ts', '.jsx', '.js'], }, }, }_

(## Hot Reload Nicht Arbeiten ```bash

Check file watching limits (Linux)

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf sudo sysctl -p

Restart development server

npm run dev -- --turbo ```_

Fehler erstellen ```bash

Enable verbose logging

DEBUG=turbopack* npm run dev -- --turbo

Check for unsupported features

npm run build ```_

Debug Configuration

```javascript // next.config.js const nextConfig = { experimental: { turbo: { // Enable debug mode logLevel: 'debug',

  // Memory limit
  memoryLimit: 4096,
},

},

// Enable source maps productionBrowserSourceMaps: true, } ```_

oder Best Practices

Projektstruktur

```bash

Recommended structure for Turbopack projects

src/ ├── app/ # App Router pages │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── (routes)/ ├── components/ # Reusable components │ ├── ui/ # Basic UI components │ ├── forms/ # Form components │ └── layout/ # Layout components ├── hooks/ # Custom hooks ├── lib/ # Utility libraries ├── types/ # TypeScript types ├── styles/ # Global styles └── utils/ # Utility functions ```_

Performance Best Practices

• ** Verwenden Sie Turbopack für die Entwicklung*, um maximale Geschwindigkeitsvorteile zu erhalten
• Implementieren Sie die richtige Codespaltung mit dynamischen Importen Optimieren Sie Bilder mit Next.js Bildkomponente
• Use TypeScript für bessere Entwicklungserfahrung
• Monitor Bündelgröße mit Bündelanalysator

Entwicklung Best Practices

Start mit --turbo flag für Entwicklung - ** Absolute Einfuhren** mit Pfadnamen - Implementieren Sie richtige Fehlergrenzen* * - **Benutze React DevTools* für Debugging - **Test Hot Reload Funktionalität regelmäßig

Produktion Best Practices

• ** Test baut** vor dem Einsatz
• Monitor-Performance
• ** Verwenden Sie Umgebungsvariablen* für Konfiguration
• **Implementieren Sie richtige Caching* Strategien
• Monitor Bündelgröße und Leistung

--

Zusammenfassung

Turbopack stellt die Zukunft der JavaScript Bündelung mit seinem inkrementellen Ansatz und der Rust-powered Performance dar. Zu den wichtigsten Merkmalen gehören:

Incremental Bundling*: Nur Prozesse geänderte Dateien für maximale Geschwindigkeit - **Rust Performance: In Rust gebaut für 10x schnellere Updates als Vite - Next.js Integration*: Erstklassige Unterstützung für Next.js-Anwendungen - **Hot Modul Ersatz*: Instant Updates während der Entwicklung - **TypeScript Native*: Eingebaute TypeScript-Unterstützung ohne Konfiguration - **Framework Agnostic*: Funktioniert mit jedem JavaScript-Rahmen - **Future-Proof: Entwickelt, um Webpack als Standard-Bündler zu ersetzen

Durch die Übernahme von Turbopack können Sie Ihre Entwicklungserfahrung mit schnelleren Builds, Instant Hot Reloads und einem ansprechenderen Entwicklungs-Workflow deutlich verbessern.

_