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:
page.js
: Bir rotanın birincil arayüz bileşenidir ve onu halka açık hale getirir.layout.js
: Alt layout'ları veya sayfaları saran bir arayüz bileşenidir. Başlık ve altbilgi gibi arayüzleri birden çok rotada paylaşmak için çok önemlidir.loading.js
: Sayfa içeriği yüklenirken gösterilecek, React Suspense üzerine kurulu isteğe bağlı bir arayüzdür.error.js
: Hata durumunda görüntülenecek, sağlam hata sınırları oluşturan isteğe bağlı bir arayüzdür.
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:
- Genel bir başlık ve altbilgiye sahip, halka açık bir pazarlama sitesi (Anasayfa, Hakkında, Fiyatlandırma).
- Kenar çubuğu, kullanıcıya özel navigasyon ve farklı bir genel yapıya sahip, özel, kimliği doğrulanmış bir kullanıcı paneli (Kontrol Paneli, Ayarlar, Profil).
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:
(marketing)
grubu içindeki herhangi bir rota,(marketing)/layout.js
tarafından sarılacaktır.(app)
grubu içindeki herhangi bir rota,(app)/layout.js
tarafından sarılacaktır.- Her iki grup da, küresel HTML yapısını tanımlamak için mükemmel olan kök
app/layout.js
dosyasını paylaşır.
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
- Bağımsız Rota Yönetimi: Her paralel rota (slot) kendi yükleme ve hata durumlarına sahip olabilir. Bu, analitik panelinizin bir yükleme göstergesi gösterirken takım akışının zaten render edilmiş olabileceği anlamına gelir, bu da çok daha iyi bir kullanıcı deneyimine yol açar.
- Koşullu Render Etme: Kullanıcı kimlik doğrulama durumu veya izinler gibi belirli koşullara göre hangi slot'ların render edileceğine programlı olarak karar verebilirsiniz.
- Alt Navigasyon: Her slot, diğer slot'ları etkilemeden bağımsız olarak gezilebilir. Bu, sekmeli arayüzler veya bir panelin durumunun diğerinden tamamen ayrı olduğu kontrol panelleri için mükemmeldir.
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:
@modal
adında bir paralel rota slot'u oluşturuyoruz.- Garip görünen
(..)(..)photos/[id]
yolu, `photos/[id]` rotasını iki seviye yukarıdan (kök dizinden) eşleştirmek için "catch-all segmentleri" adı verilen bir geleneği kullanır. - Bir kullanıcı ana galeri sayfasından (
/
) bir fotoğrafa gittiğinde, Next.js bu navigasyonu yakalar ve tam bir sayfa navigasyonu yapmak yerine modal'ın sayfasını@modal
slot'u içinde render eder. - Ana galeri sayfası, layout'un `children` prop'unda görünür kalır.
- Kullanıcı doğrudan
/photos/123
adresini ziyaret ederse, yakalama tetiklenmez vephotos/[id]/page.js
adresindeki özel sayfa normal şekilde render edilir.
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ı
- Açıklayıcı İsimler Kullanın: Proje yapınızı kendi kendini belgeleyen hale getirmek için
(auth)
,(marketing)
veya(protected)
gibi anlamlı isimler seçin. - Mümkün Olduğunca Düz Tutun: Rota gruplarını aşırı iç içe geçirmekten kaçının. Daha düz bir yapı genellikle anlaşılması ve bakımı daha kolaydır.
- Amaçlarını Unutmayın: Onları URL segmentleri oluşturmak için değil, layout bölümlendirmesi ve organizasyon için kullanın.
Paralel Rotalar En İyi Uygulamaları
- Her Zaman bir `default.js` Sağlayın: Önemsiz olmayan herhangi bir paralel rota kullanımı için, ilk yüklemeleri ve eşleşmeyen durumları zarif bir şekilde ele almak üzere bir `default.js` dosyası ekleyin.
- Ayrıntılı Yükleme Durumlarından Yararlanın: Kullanıcıya anında geri bildirim sağlamak ve arayüz şelalelerini (UI waterfalls) önlemek için her slot'un dizinine bir `loading.js` dosyası yerleştirin.
- Bağımsız Arayüzler İçin Kullanın: Paralel rotalar, her slot'un içeriği gerçekten bağımsız olduğunda parlar. Paneller derinden birbirine bağlıysa, tek bir bileşen ağacı üzerinden prop'ları aşağı geçirmek daha basit bir çözüm olabilir.
Kaçınılması Gereken Yaygın Hatalar
- Gelenekleri Unutmak: Yaygın bir hata, rota grupları için parantezleri `()` veya paralel rota slot'ları için et-işaretini `@` unutmaktır. Bu, onların normal URL segmentleri olarak ele alınmasına yol açacaktır.
- Eksik `default.js`: Paralel rotalarla ilgili en sık karşılaşılan sorun, eşleşmeyen slot'lar için bir geri dönüş `default.js` sağlanmadığı için beklenmedik 404 hataları görmektir.
- `children`'ı Yanlış Anlamak: Paralel rotalar kullanan bir layout'ta, `children`'ın, aynı dizindeki `page.js` veya iç içe geçmiş layout'a örtülü olarak eşlenen slot'lardan sadece biri olduğunu unutmayın.
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.