Turbopack: Rust-based Bundler

// CONTOH: Bagaimana incremental computation bekerja

// Misal proyek Anda punya 10.000 file
// Anda mengubah 1 file: src/components/Button.tsx

// Webpack (lama):
// 1. Parse ulang 10.000 file
// 2. Rebuild dependency graph
// 3. Re-compile semua module
// 4. Generate new bundle
// → Waktu: 5-30 detik

// Turbopack (incremental):
// 1. Deteksi Button.tsx berubah
// 2. Hitung ulang HANYA Button.tsx
// 3. Hitung ulang HANYA file yang import Button
// 4. Generate patch untuk browser
// → Waktu: <100ms

// Turbo Engine melacak dependency pada level FUNCTION
// bukan level FILE seperti Webpack

// Turbopack memanfaatkan Rust untuk:
// 1. Multi-threading paralel — memproses banyak file sekaligus
// 2. Zero-cost abstractions — tidak ada GC overhead
// 3. Memory safety tanpa garbage collector
// 4. Native compilation — binary yang sangat cepat

// Arsitektur Thread Pool:
//
// ┌─────────────────────────────────────────┐
// │          Main Thread (Orchestrator)       │
// │  • Koordinasi task                        │
// │  • File watching                          │
// │  • HMR communication                     │
// └──────────┬───────────┬──────────────────┘
//            │           │
//    ┌───────▼───┐ ┌────▼──────┐ ┌──────────┐
//    │ Worker 1  │ │ Worker 2  │ │ Worker N │
//    │ • Parse   │ │ • Parse   │ │ • Parse  │
//    │ • Transform│ │ • Transform│ │ • Trans. │
//    │ • Resolve │ │ • Resolve │ │ • Resolve│
//    └───────────┘ └───────────┘ └──────────┘
//
// Setiap worker memproses file secara independen
// Hasil digabungkan oleh main thread

# Next.js 15+ — Turbopack sudah tersedia
# Aktifkan dengan flag --turbopack (atau -T)

# Development dengan Turbopack
npx next dev --turbopack

# Atau shorthand
npx next dev -T

# Cek apakah Turbopack aktif
# Output akan menunjukkan "Turbopack" di terminal:
#   ▲ Next.js 15.x
#   - Local:        http://localhost:3000
#   - Environments: .env.local
#   - Turbopack:    enabled ✓

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Konfigurasi Turbopack
  turbopack: {
    // Resolve aliases — mirip webpack.resolve.alias
    resolveAlias: {
      '@components': './src/components',
      '@utils': './src/utils',
      '@hooks': './src/hooks',
      '@styles': './src/styles'
    },

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

  // Konfigurasi umum Next.js
  experimental: {
    // Turbopack-specific features
    turbo: {
      // Loader configuration (untuk file non-standard)
      loaders: {
        '.md': ['@mdx-js/loader'],
        '.svg': ['@svgr/webpack'],
        '.glsl': ['raw-loader']
      }
    }
  }
};

module.exports = nextConfig;

// Turbopack mendukung .env files secara otomatis
// Urutan prioritas:
// 1. .env.development.local  (saat next dev)
// 2. .env.local              (tidak di-commit ke git)
// 3. .env.development        (saat next dev)
// 4. .env                    (default)

// Mengakses env di Turbopack:
// process.env.VARIABLE_NAME  → server-side
// process.env.NEXT_PUBLIC_*  → client-side (exposed)

// .env.local
// NEXT_PUBLIC_API_URL=https://api.example.com
// DATABASE_URL=postgresql://...
// SECRET_KEY=rahasia123

// next.config.js — CSS di Turbopack
const nextConfig = {
  turbopack: {
    rules: {
      // PostCSS sudah terintegrasi otomatis
      // Cukup buat postcss.config.js

      // SCSS/SASS support
      '*.scss': {
        loaders: ['sass-loader'],
        as: '*.css'
      }
    }
  },

  // CSS Modules — otomatis aktif untuk .module.css
  // Tidak perlu konfigurasi tambahan

  // PostCSS config — diterapkan otomatis
  // Buat postcss.config.js di root proyek
};

// Import gambar langsung di Turbopack
import heroImage from './hero.jpg';
import logoSvg from './logo.svg';

// Menggunakan Next.js Image component
import Image from 'next/image';

export default function Hero() {
  return (
    <div>
      <Image
        src={heroImage}
        alt="Hero banner"
        width={1200}
        height={600}
        priority
      />

      <Image
        src={logoSvg}
        alt="Logo"
        width={200}
        height={50}
      />
    </div>
  );
}

// Supported formats:
// .jpg, .jpeg, .png, .gif, .svg, .webp, .avif, .ico
// .mp4, .webm (video)
// .woff, .woff2, .ttf, .otf (fonts)

LANGKAH 1: Update Next.js ke versi terbaru
  $ npm install next@latest react@latest react-dom@latest

LANGKAH 2: Cek kompatibilitas webpack config Anda
  - Buka next.config.js
  - Identifikasi custom webpack config (jika ada)
  - Cek apakah Turbopack sudah support fitur yang sama

LANGKAH 3: Jalankan dengan Turbopack
  $ npx next dev --turbopack

LANGKAH 4: Periksa error dan warning
  - Terminal akan menunjukkan fitur yang belum didukung
  - Perbaiki satu per satu

LANGKAH 5: Migrasi webpack.config.js ke turbopack config
  - resolveAlias → turbopack.resolveAlias
  - module.rules → turbopack.rules (atau loaders)
  - plugins → biasanya tidak diperlukan di Turbopack

LANGKAH 6: Test semua halaman dan fitur
  - Pastikan semua route berfungsi
  - Cek CSS dan styling
  - Cek image loading
  - Cek environment variables

// next.config.js — Turbopack loaders
module.exports = {
  experimental: {
    turbo: {
      loaders: {
        // SVG sebagai React component
        '*.svg': ['@svgr/webpack'],

        // Markdown dengan MDX
        '*.md': ['@mdx-js/loader'],

        // GLSL shaders
        '*.glsl': ['raw-loader'],

        // YAML files
        '*.yaml': ['yaml-loader'],

        // Custom loader untuk file tertentu
        '*.graphql': {
          loaders: ['graphql-tag/loader'],
          as: '*.js'
        }
      }
    }
  }
};

// tsconfig.json — TypeScript path aliases
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@styles/*": ["./src/styles/*"],
      "@types/*": ["./src/types/*"]
    }
  }
}

// next.config.js — Turbopack aliases (opsional)
// Turbopack bisa membaca langsung dari tsconfig.json
module.exports = {
  turbopack: {
    resolveAlias: {
      // Tambahkan alias yang tidak ada di tsconfig
      '@lib': './src/lib',
      '@config': './config'
    }
  }
};

// Penggunaan di kode:
import Button from '@components/Button';
import { formatRupiah } from '@utils/format';
import useAuth from '@hooks/useAuth';

/* components/Button.module.css */
/* CSS Modules — class names di-scope secara otomatis */
.button {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.primary:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.secondary {
  background: transparent;
  color: #3b82f6;
  border: 2px solid #3b82f6;
}

.secondary:hover {
  background: #3b82f6;
  color: white;
}

/* Output: class names menjadi unik */
/* .Button_button__x7d2k { ... } */
/* .Button_primary__a3f9m { ... } */

// components/Button.tsx
import styles from './Button.module.css';

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

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

// Penggunaan:
// <Button variant="primary">Simpan</Button>
// <Button variant="secondary">Batal</Button>

✅ GUNAKAN Turbopack jika:
   - Anda menggunakan Next.js 15+
   - Proyek sangat besar (10.000+ files)
   - HMR lambat dengan bundler saat ini
   - Development speed adalah prioritas utama
   - Proyek baru yang belum punya custom build config

❌ JANGAN GUNAKAN Turbopack jika:
   - Menggunakan framework selain Next.js (misal: Nuxt, SvelteKit)
   - Membutuhkan plugin Webpack yang kompleks
   - Membutuhkan production build optimization (belum matang)
   - Proyek sangat bergantung pada custom webpack config
   - Stabilitas lebih penting daripada speed (gunakan Webpack/Vite)

2024 (SELESAI):
✅ Turbopack Dev — stable di Next.js 15
✅ CSS Modules, PostCSS, Tailwind support
✅ HMR yang sangat cepat
✅ Server Components support

2025-2026 (DALAM PENGEMBANGAN):
🔄 Turbopack Build — production bundling
🔄 Improved caching (persistent disk cache)
🔄 Module Federation support
🔄 Broader framework support (beyond Next.js)

FUTURE (PLANNED):
📋 Turbopack as standalone tool
📋 Custom plugin API
📋 Better bundle analysis tools
📋 Parallel compilation improvements
📋 Support untuk library bundling

GOAL AKHIR:
→ Turbopack menjadi bundler default untuk semua proyek
→ Menggantikan Webpack di ekosistem JavaScript
→ Menggabungkan kecepatan esbuild + fitur Webpack