index

Turborepo ile Monorepo Yönetimi

Büyük projelerde kodu parçalara ayırmak ve yönetmek zor olabilir. Turborepo, Vercel tarafından geliştirilen bir araç olarak, monorepo yapısını kolaylaştırmak için harika özellikler sunar.

Neden Turborepo?

Tek bir depoda çoklu proje yönetimi
Cache ve paralel işlemler ile hızlı build süreci
Kod paylaşımı ve tutarlılık

Kurulum

Turborepo’yu hızlıca başlatmak için:

npx create-turbo@latest

Elle kurulum için:

mkdir my-turbo-app && cd my-turbo-app
pnpm init -y
pnpm add -D turbo

Ve ardından turbo.json dosyasını oluşturun:

{
  "$schema": "https://turborepo.org/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "lint": {},
    "dev": {
      "cache": false
    }
  }
}

Proje Yapısı

my-turbo-app/
├── apps/
│   ├── web/         # Next.js uygulaması
│   └── docs/        # Belgelendirme sitesi (örn. Docusaurus)
├── packages/
│   ├── ui/          # Ortak UI bileşenleri
│   └── config/      # Ortak yapılandırmalar

Ortak UI Kullanımı

packages/ui/Button.tsx:

export const Button = () => {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 text-white">Tıkla</button>
  )
}

apps/web/page.tsx:

import { Button } from '@myorg/ui'
 
export default function Home() {
  return (
    <main>
      <h1>Merhaba Turborepo</h1>
      <Button />
    </main>
  )
}

Not: package.json içinde "name": "@myorg/ui" gibi alanlar tanımlanmalı ve tsconfig.json içinde path alias ayarları yapılmalıdır.

Turbo Komutları

Örnek komutlar:

pnpm turbo run build
pnpm turbo run lint

İpucu: Turbo cache sistemini kullanır, değişmeyen paketler tekrar build edilmez.

Avantajları

1. Hızlı Build Süreçleri

Turborepo’nun cache sistemi sayesinde:

Değişmeyen dosyalar tekrar işlenmez
Paralel işlemler performansı artırır
İncremental builds mümkün hale gelir

2. Kod Paylaşımı

// packages/shared/types.ts
export interface User {
  id: string;
  name: string;
  email: string;
}
 
// apps/web/components/UserCard.tsx
import { User } from "@myorg/shared/types";
 
export const UserCard = ({ user }: { user: User }) => {
  return (
    <div className="p-4 border rounded">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
};

3. Consistent Development Environment

{
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev --parallel",
    "lint": "turbo run lint",
    "test": "turbo run test"
  }
}

Best Practices

1. Package Organizing

packages/
├── ui/              # Reusable UI components
├── config/          # Shared configurations
├── utils/           # Utility functions
├── types/           # TypeScript type definitions
└── eslint-config/   # ESLint configurations

2. Dependency Management

{
  "devDependencies": {
    "turbo": "latest",
    "@turbo/gen": "latest"
  },
  "packageManager": "[email protected]"
}

3. Pipeline Optimization

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "dist/**"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts"]
    }
  }
}

Video Kaynaklar

Video

Turborepo: Frontend ve Backend'i aynı anda yönetmenin en temiz yolu

Furkan Özay

Sonuç

Turborepo, özellikle büyük projelerde kod organizasyonu, tekrar kullanılabilirlik ve hızlı geliştirme süreçleri açısından güçlü bir çözümdür.

Faydaları:

Daha hızlı build süreçleri
Kod tekrarının azalması
Consistent development environment
Team collaboration’ın iyileşmesi

Projelerinizi bir adım öteye taşımak için monorepo yapısını değerlendirin ve Turborepo ile tanışın!