Monorepo dengan Turborepo — Setup dari Nol hingga Production

Turborepo — Build System untuk Monorepo Modern

Monorepo — menyimpan multiple projects dalam satu repository — semakin populer di kalangan developer. Google, Meta, dan Vercel menggunakannya. Turborepo membuat pendekatan ini accessible untuk tim kecil maupun besar dengan intelligent caching dan task orchestration.

🤔 Mengapa Monorepo?

• Shared code — reuse komponen, utilities, dan types antar project

• Atomic changes — update library dan semua consumer-nya dalam satu commit

• Konsistensi — satu config ESLint, TypeScript, Prettier untuk semua project

• Simplified dependencies — satu lockfile, tidak ada version mismatch

📦 Setup dari Nol

# Create monorepo
npx create-turbo@latest my-monorepo
cd my-monorepo

Struktur folder yang dihasilkan:

my-monorepo/
├── apps/
│   ├── web/          # Next.js app
│   └── api/          # Express/Hono API
├── packages/
│   ├── ui/           # Shared UI components
│   ├── config/       # Shared configs (ESLint, TS)
│   └── utils/        # Shared utilities
├── turbo.json
├── package.json
└── pnpm-workspace.yaml

⚙️ Konfigurasi turbo.json

{
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["build"]
    }
  }
}

dependsOn: ["^build"] artinya: build dependencies dulu sebelum build package ini.

🚀 Intelligent Caching

Fitur killer Turborepo: jika kode tidak berubah, task tidak dijalankan ulang.

# Build pertama — semua dijalankan
$ turbo build
✓ packages/ui: build (2.1s)
✓ apps/web: build (8.3s)
✓ apps/api: build (1.2s)
Total: 11.6s

# Build kedua (tanpa perubahan) — cache hit!
$ turbo build
✓ packages/ui: build (cache hit)
✓ apps/web: build (cache hit)
✓ apps/api: build (cache hit)
Total: 0.3s  ← 97% lebih cepat!

☁️ Remote Caching

Turborepo mendukung remote caching via Vercel — cache dibagikan antar developer dan CI:

# Login ke Vercel
npx turbo login

# Link repo
npx turbo link

# Sekarang cache dibagikan ke seluruh tim!
$ turbo build
✓ apps/web: build (remote cache hit) ← dari build teammate!

📁 Membuat Shared Package

// packages/ui/src/Button.tsx
export function Button({ children, variant = "primary", ...props }) {
  return (
    <button
      className={}
      {...props}
    >
      {children}
    </button>
  );
}

// packages/ui/package.json
{
  "name": "@repo/ui",
  "exports": {
    "./button": "./src/Button.tsx"
  }
}

// apps/web/src/app/page.tsx — import dari shared package
import { Button } from "@repo/ui/button";

🔧 Tips Production

• Gunakan pnpm — workspace support terbaik dan disk space efisien

• Shared tsconfig — buat packages/config/tsconfig.base.json yang di-extend semua project

• Filtering — turbo build --filter=web hanya build app tertentu

• Watch mode — turbo dev otomatis menjalankan semua dev server

• GitHub Actions cache — gunakan actions/cache untuk turbo cache di CI

⚡ Turborepo vs Nx vs Lerna

• Lerna — pionir monorepo JS, tapi maintenance lambat dan fitur terbatas

• Nx — fitur sangat lengkap tapi learning curve tinggi dan opinionated

• Turborepo — simple, cepat, zero-config caching, integrasi Vercel

Turborepo ideal untuk tim yang ingin mulai cepat tanpa konfigurasi berlebihan.

Kesimpulan

Turborepo membuat monorepo accessible untuk semua ukuran tim. Dengan intelligent caching yang bisa menghemat 90%+ waktu build, remote caching untuk kolaborasi tim, dan setup yang minimal, Turborepo adalah pilihan solid untuk mengelola multiple projects dalam satu repository. Mulai dengan npx create-turbo@latest dan rasakan perbedaannya.