M

MLOG

Türkçe

Next.js'te ölçeklenebilir ve dinamik arayüzlerin kilidini açın. Kapsamlı rehberimiz, organizasyon için Rota Gruplarını ve karmaşık paneller için Paralel Rotaları ele alıyor. Seviye atlayın!

Next.js App Router'da Uzmanlaşma: Rota Grupları ve Paralel Rotalar Mimarisine Derinlemesine Bir Bakış

Next.js App Router'ın yayınlanması, geliştiricilerin popüler React framework'ü ile web uygulamaları oluşturma şeklinde bir paradigma değişikliğine işaret etti. Pages Router'ın dosya tabanlı geleneklerinden uzaklaşan App Router, daha güçlü, esnek ve sunucu merkezli bir model sundu. Bu evrim, daha fazla kontrol ve organizasyon ile son derece karmaşık ve performanslı kullanıcı arayüzleri oluşturmamızı sağlıyor. Sunulan en dönüştürücü özellikler arasında Rota Grupları ve Paralel Rotalar bulunmaktadır.

Kurumsal düzeyde uygulamalar oluşturmayı hedefleyen geliştiriciler için bu iki kavrama hakim olmak sadece faydalı değil, aynı zamanda zorunludur. Bu kavramlar, layout yönetimi, rota organizasyonu ve kontrol panelleri gibi dinamik, çok panelli arayüzlerin oluşturulmasıyla ilgili yaygın mimari zorlukları çözer. Bu rehber, küresel bir geliştirici kitlesi için temel kavramlardan ileri uygulama stratejilerine ve en iyi uygulamalara kadar Rota Grupları ve Paralel Rotalar hakkında kapsamlı bir keşif sunmaktadır.

Next.js App Router'ı Anlamak: Hızlı Bir Hatırlatma

Ayrıntılara dalmadan önce, App Router'ın temel ilkelerini kısaca gözden geçirelim. Mimarisi, klasörlerin URL segmentlerini tanımladığı dizin tabanlı bir sistem üzerine kurulmuştur. Bu klasörler içindeki özel dosyalar, o segmentin arayüzünü ve davranışını tanımlar:

Bu yapı, React Sunucu Bileşenleri'nin (RSC'ler) varsayılan kullanımıyla birleştiğinde, performansı ve veri çekme modellerini önemli ölçüde iyileştirebilen sunucu öncelikli bir yaklaşımı teşvik eder. Rota Grupları ve Paralel Rotalar, bu temel üzerine inşa edilen gelişmiş geleneklerdir.

Rota Gruplarını Çözümlemek: Projenizi Akıl Sağlığı ve Ölçeklenebilirlik için Düzenlemek

Bir uygulama büyüdükçe, rota sayısı başa çıkılmaz hale gelebilir. Pazarlama için bir dizi sayfanız, kullanıcı kimlik doğrulaması için başka bir set ve temel uygulama paneli için üçüncü bir set olabilir. Mantıksal olarak, bunlar ayrı bölümlerdir, ancak bunları URL'lerinizi karıştırmadan dosya sisteminizde nasıl organize edersiniz? Rota Gruplarının çözdüğü sorun tam olarak budur.

Rota Grupları Nedir?

Bir Rota Grubu, dosyalarınızı ve rota segmentlerinizi URL yapısını etkilemeden mantıksal gruplar halinde düzenlemenizi sağlayan bir mekanizmadır. Bir klasör adını parantez içine alarak bir rota grubu oluşturursunuz, örneğin, (marketing) veya (app).

Parantez içindeki klasör adı tamamen organizasyonel amaçlıdır. Next.js, URL yolunu belirlerken bunu tamamen göz ardı eder. Örneğin, app/(marketing)/about/page.js adresindeki dosya /(marketing)/about URL'sinde değil, /about URL'sinde sunulacaktır.

Temel Kullanım Alanları ve Rota Gruplarının Faydaları

Basit organizasyon bir fayda olsa da, Rota Gruplarının gerçek gücü, uygulamanızı farklı, paylaşılan layout'lara sahip bölümlere ayırma yeteneğinde yatar.

1. Rota Segmentleri için Farklı Layout'lar Oluşturma

Bu en yaygın ve güçlü kullanım durumudur. İki ana bölümü olan bir web uygulaması hayal edin:

Rota Grupları olmadan, bu bölümlere farklı kök layout'lar uygulamak karmaşık olurdu. Rota Grupları ile bu inanılmaz derecede sezgiseldir. Her grubun içine benzersiz bir layout.js dosyası oluşturabilirsiniz.

İşte bu senaryo için tipik bir dosya yapısı:

app/
├── (marketing)/
│   ├── layout.js      // Pazarlama başlığı/altbilgisi içeren genel layout
│   ├── page.js        // '/' adresinde render edilir
│   └── about/
│       └── page.js    // '/about' adresinde render edilir
├── (app)/
│   ├── layout.js      // Kenar çubuğu olan kontrol paneli layout'u
│   ├── dashboard/
│   │   └── page.js    // '/dashboard' adresinde render edilir
│   └── settings/
│       └── page.js    // '/settings' adresinde render edilir
└── layout.js          // Kök layout (ör. <html> ve <body> etiketleri için)

Bu mimaride:

2. Bir Segmenti Paylaşılan Bir Layout'tan Çıkarma

Bazen, belirli bir sayfanın veya bölümün üst layout'tan tamamen kurtulması gerekir. Yaygın bir örnek, ana sitenin navigasyonuna sahip olmaması gereken bir ödeme süreci veya özel bir açılış sayfasıdır. Bunu, rotayı daha üst düzey layout'u paylaşmayan bir gruba yerleştirerek başarabilirsiniz. Bu karmaşık gibi görünse de, aslında bir rota grubuna, kök layout'taki `children`'ı render etmeyen kendi üst düzey layout.js'ini vermek anlamına gelir.

Pratik Örnek: Çoklu Layout'lu Bir Uygulama Oluşturma

Yukarıda açıklanan pazarlama/uygulama yapısının minimal bir versiyonunu oluşturalım.

1. Kök Layout (app/layout.js)

Bu layout minimaldir ve her bir sayfaya uygulanır. Temel HTML yapısını tanımlar.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="tr">
      <body>{children}</body>
    </html>
  );
}

2. Pazarlama Layout'u (app/(marketing)/layout.js)

Bu layout, halka açık bir başlık ve altbilgi içerir.

// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>Pazarlama Başlığı</header>
      <main>{children}</main>
      <footer>Pazarlama Altbilgisi</footer>
    </div>
  );
}

3. Uygulama Paneli Layout'u (app/(app)/layout.js)

Bu layout, kimliği doğrulanmış kullanıcılar için bir kenar çubuğu içeren farklı bir yapıya sahiptir.

// app/(app)/layout.js
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
        Kontrol Paneli Kenar Çubuğu
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>{children}</main>
    </div>
  );
}

Bu yapıyla, /about adresine gitmek sayfayı `MarketingLayout` ile, /dashboard adresine gitmek ise `AppLayout` ile render edecektir. URL temiz ve anlamsal kalırken, proje dosya yapımız mükemmel bir şekilde organize edilmiş ve ölçeklenebilir olur.

Paralel Rotalar ile Dinamik Arayüzlerin Kilidini Açmak

Rota Grupları bir uygulamanın farklı bölümlerini düzenlemeye yardımcı olurken, Paralel Rotalar farklı bir zorluğu ele alır: tek bir layout içinde birden çok, bağımsız sayfa görünümünü görüntülemek. Bu, karmaşık kontrol panelleri, sosyal medya akışları veya farklı panellerin aynı anda render edilmesi ve yönetilmesi gereken herhangi bir arayüz için yaygın bir gereksinimdir.

Paralel Rotalar Nedir?

Paralel Rotalar, aynı layout içinde aynı anda bir veya daha fazla sayfayı render etmenize olanak tanır. Bu rotalar, slot'lar adı verilen özel bir klasör geleneği kullanılarak tanımlanır. Slot'lar, @klasörAdı sözdizimi kullanılarak oluşturulur. URL yapısının bir parçası değillerdir; bunun yerine, en yakın paylaşılan üst `layout.js` dosyasına otomatik olarak props olarak geçirilirler.

Örneğin, bir ekip etkinlik akışını ve bir analitik grafiğini yan yana görüntülemesi gereken bir layout'unuz varsa, iki slot tanımlayabilirsiniz: `@team` ve `@analytics`.

Temel Fikir: Slot'lar

Slot'ları layout'unuzdaki isimlendirilmiş yer tutucular olarak düşünün. Layout dosyası bu slot'ları açıkça props olarak kabul eder ve onları nerede render edeceğine karar verir.

Bu layout bileşenini düşünün:

// 'team' ve 'analytics' adında iki slot kabul eden bir layout
export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {team}
        {analytics}
      </div>
    </div>
  );
}

Burada `children`, `team` ve `analytics` hepsi birer slottur. `children`, dizindeki standart `page.js`'e karşılık gelen örtülü bir slottur. `team` ve `analytics`, dosya sisteminde `@` öneki ile oluşturulması gereken açık slot'lardır.

Temel Özellikler ve Avantajlar

Gerçek Dünya Senaryosu: Karmaşık Bir Kontrol Paneli Oluşturma

/dashboard URL'sinde bir kontrol paneli tasarlayalım. Bir ana içerik alanı, bir takım etkinlik paneli ve bir performans analitik paneli olacak.

Dosya Yapısı:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // Analitik slotu için arayüz
    │   └── loading.js     // Özellikle analitik için yükleme arayüzü
    ├── @team/
    │   └── page.js          // Takım slotu için arayüz
    ├── layout.js            // Slot'ları düzenleyen layout
    └── page.js              // Örtülü 'children' slotu (ana içerik)

1. Kontrol Paneli Layout'u (app/dashboard/layout.js)

Bu layout, üç slot'u alır ve düzenler.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  const isLoggedIn = true; // Gerçek kimlik doğrulama mantığıyla değiştirin

  return isLoggedIn ? (
    <div>
      <h1>Ana Kontrol Paneli</h1>
      {children}
      <div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ border: '1px solid blue', padding: '10px' }}>
          <h2>Takım Etkinliği</h2>
          {team}
        </div>
        <div style={{ border: '1px solid green', padding: '10px' }}>
          <h2>Performans Analitiği</h2>
          {analytics}
        </div>
      </div>
    </div>
  ) : (
    <div>Kontrol panelini görüntülemek için lütfen giriş yapın.</div>
  );
}

2. Slot Sayfaları (ör. app/dashboard/@analytics/page.js)

Her slot'un `page.js` dosyası, o belirli panelin arayüzünü içerir.

// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
  // Bir ağ isteğini simüle et
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { views: '1.2M', revenue: '$50,000' };
}

export default async function AnalyticsPage() {
  const data = await getAnalyticsData();
  return (
    <div>
      <p>Sayfa Görüntülemeleri: {data.views}</p>
      <p>Gelir: {data.revenue}</p>
    </div>
  );
}

// app/dashboard/@analytics/loading.js
export default function Loading() {
  return <p>Analitik verileri yükleniyor...</p>;
}

Bu kurulumla, bir kullanıcı /dashboard adresine gittiğinde, Next.js `DashboardLayout`'ı render edecektir. Layout, dashboard/page.js, dashboard/@team/page.js ve dashboard/@analytics/page.js'den render edilen içeriği props olarak alacak ve buna göre yerleştirecektir. En önemlisi, analitik paneli, kontrol panelinin geri kalanının render edilmesini engellemeden 3 saniye boyunca kendi `loading.js` durumunu gösterecektir.

Eşleşmeyen Rotaları `default.js` ile Ele Alma

Kritik bir soru ortaya çıkıyor: Next.js mevcut URL için bir slot'un aktif durumunu alamazsa ne olur? Örneğin, ilk yüklemede veya sayfa yeniden yüklemesinde URL /dashboard olabilir, bu da @team veya `@analytics` slot'larının içinde ne gösterileceğine dair belirli talimatlar sağlamaz. Varsayılan olarak, Next.js bir 404 hatası render eder.

Bunu önlemek için, paralel rota içinde bir default.js dosyası oluşturarak bir geri dönüş (fallback) arayüzü sağlayabiliriz.

Örnek:

// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
  return (
    <div>
      <p>Seçili analitik verisi yok.</p>
    </div>
  );
}

Şimdi, analitik slot'u eşleşmezse, Next.js 404 sayfası yerine `default.js`'nin içeriğini render edecektir. Bu, özellikle karmaşık bir paralel rota kurulumunun ilk yüklemesinde sorunsuz bir kullanıcı deneyimi yaratmak için gereklidir.

Gelişmiş Mimariler için Rota Gruplarını ve Paralel Rotaları Birleştirmek

App Router'ın gerçek gücü, özelliklerini birleştirdiğinizde ortaya çıkar. Rota Grupları ve Paralel Rotalar, sofistike ve yüksek düzeyde organize edilmiş uygulama mimarileri oluşturmak için harika bir şekilde birlikte çalışır.

Kullanım Durumu: Çoklu Modlu İçerik Görüntüleyici

Kullanıcının bir öğeyi görüntüleyebildiği, ancak aynı zamanda arka plan sayfasının bağlamını kaybetmeden ayrıntılarını görmek için bir modal pencere açabildiği bir medya galerisi veya belge görüntüleyici gibi bir platform hayal edin. Bu genellikle "Yakalayan Rota" (Intercepting Route) olarak adlandırılır ve paralel rotalar üzerine kurulu güçlü bir desendir.

Bir fotoğraf galerisi oluşturalım. Bir fotoğrafa tıkladığınızda, bir modal içinde açılır. Ancak sayfayı yenilerseniz veya fotoğrafın URL'sine doğrudan giderseniz, o fotoğraf için özel bir sayfa göstermelidir.

Dosya Yapısı:

app/
├── @modal/(..)(..)photos/[id]/page.js  // Modal için yakalanan rota
├── photos/
│   └── [id]/
│       └── page.js                  // Özel fotoğraf sayfası
├── layout.js                        // @modal slot'unu alan kök layout
└── page.js                          // Ana galeri sayfası

Açıklama:

Bu desen, paralel rotaları (@modal slot'u) gelişmiş yönlendirme gelenekleriyle birleştirerek, manuel olarak uygulanması çok karmaşık olacak sorunsuz bir kullanıcı deneyimi yaratır.

En İyi Uygulamalar ve Yaygın Hatalar

Rota Grupları En İyi Uygulamaları

Paralel Rotalar En İyi Uygulamaları

Kaçınılması Gereken Yaygın Hatalar

Sonuç: Web Uygulamalarının Geleceğini İnşa Etmek

Next.js App Router, Rota Grupları ve Paralel Rotalar gibi özellikleriyle, modern web geliştirme için sağlam ve ölçeklenebilir bir temel sağlar. Rota Grupları, URL semantiğinden ödün vermeden kodu düzenlemek ve farklı layout'lar uygulamak için zarif bir çözüm sunar. Paralel Rotalar, daha önce yalnızca karmaşık istemci tarafı durum yönetimi ile elde edilebilen, bağımsız durumlara sahip dinamik, çok panelli arayüzler oluşturma yeteneğinin kilidini açar.

Bu güçlü mimari desenleri anlayarak ve birleştirerek, basit web sitelerinin ötesine geçebilir ve günümüz kullanıcılarının taleplerini karşılayan sofistike, performanslı ve bakımı kolay uygulamalar oluşturmaya başlayabilirsiniz. Öğrenme eğrisi klasik Pages Router'dan daha dik olabilir, ancak uygulama mimarisi ve kullanıcı deneyimi açısından getirisi çok büyüktür. Bir sonraki projenizde bu kavramları denemeye başlayın ve Next.js'in tüm potansiyelini ortaya çıkarın.