Monorepo (tek depo) yaklaşımı, birden fazla projeyi veya modülü tek bir depo içinde barındırma yöntemidir. Next.js ile bir Monorepo yapılandırmak, büyük ölçekli projelerinizi düzenli ve yönetilebilir bir şekilde oluşturmanızı sağlar. Bu rehberde, Next.js ile Monorepo'nun nasıl çalıştığını, avantajlarını, yapılandırma süreçlerini ve iyi uygulama örneklerini ele alıyoruz.

Monorepo Nedir ve Neden Kullanılmalı?

Monorepo, birden fazla bağımsız projenin veya modülün tek bir Git deposunda yönetildiği bir yaklaşımdır.

Monorepo'nun Avantajları:

  • Paylaşılan Kod: Modüller arasında kolayca kod paylaşımı yapılabilir.
  • Konsolide Yönetim: Tek bir Git deposu tüm projeleri kontrol eder.
  • Daha Az Bağımlılık Çakışması: Farklı modüller için aynı bağımlılık sürümleri kullanılır.
  • CI/CD Kolaylığı: Tek depo içinde entegre test ve dağıtım süreçleri.

Next.js Monorepo Yapısının Özellikleri

Next.js, Monorepo yapılarını desteklemek için optimize edilmiş bir yapıya sahiptir. Monorepo yapılandırmasında genellikle aşağıdaki araçlar kullanılır:

  • Turbolinks (Turborepo): Next.js projeleri için yerleşik Monorepo desteği sunar.
  • Yarn Workspaces veya npm Workspaces: Bağımlılık yönetimi için popüler çözümler.
  • TypeScript: Modüller arasında tip güvenliği sağlar.

Adım Adım Next.js ile Monorepo Kurulumu

1. Monorepo Altyapısı Kurulumu

Bir Monorepo oluşturmak için `pnpm`, `Yarn` veya `npm workspaces` kullanılabilir. Burada pnpm workspace'i örnek alıyoruz.

Proje klasörü oluşturun :
mkdir my-monorepo && cd my-monorepo
pnpm init
Workspace yapılandırmasını tanımlayın :

`package.json` dosyasını şu şekilde düzenleyin:
{
"name": "my-monorepo",
"version": "1.0.0",
"private": true,
"workspaces": [
"packages/*"
]
}
2. Modülleri Ekleyin

`packages/` dizininde bağımsız modüller oluşturun:
mkdir -p packages/web packages/ui packages/utils
web (Next.js Uygulaması):
cd packages/web
pnpm create next-app .
ui (Paylaşılan Bileşenler):

cd ../ui
pnpm init
Bir `Button` bileşeni ekleyin:
export const Button = () => {
return <button>Click Me!</button>;
};
3. Paylaşılan Modülleri Bağlayın

`web` projesinden `ui` modülünü kullanmak için bağımlılık olarak ekleyin:
pnpm add ../ui -w
4. TypeScript Yapılandırması

Proje genelinde ortak bir TypeScript yapılandırması oluşturun:

`tsconfig.json`:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@ui/*": ["packages/ui/*"]
}
}
}
`web` uygulamasında `tsconfig.json` dosyasına referans ekleyin:
{
"extends": "../../tsconfig.json"
}
5. Turborepo ile Optimize Etme

Turbolinks ile Monorepo’nun performansını artırabilirsiniz:

pnpm add turbo -D
`turbo.json`:
{
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
}
}
}

Next.js Monorepo Kullanmanın Avantajları
  • Kodun Tekrar Kullanımı: React bileşenleri, TypeScript türleri ve yardımcı fonksiyonlar arasında kolayca paylaşım yapılabilir.
  • Verimli İnşa Süreçleri: Turborepo ile bağımsız modüller hızlıca yapılandırılır.
  • Yönetim Kolaylığı: Tüm projeler tek bir depo içinde kontrol edilir.

Next.js ile Monorepo kullanımı, ölçeklenebilir ve düzenli bir geliştirme ortamı sağlar. Özellikle büyük ekipler ve modüler projeler için, paylaşılan kaynakları merkezi bir şekilde yönetmek büyük avantaj sunar. TypeScript ile güçlü tip kontrolü ve Turborepo ile performans optimizasyonları sağlanabilir.

Herhangi bir sorunuz veya eklemek istediğiniz detaylar varsa, paylaşmaktan çekinmeyin! 😊