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": "pnpm@8.0.0"
}

3. Pipeline Optimization

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

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!