Next.js'in App Router'ı, dosya tabanlı routing ve React Server Components ile modern web uygulamaları için güçlü bir yapı sunar. Bu yazıda, App Router ile etkili routing ve layout tasarımı için pratik ipuçlarını ve kontrol listesini bulacaksınız. İster yeni bir proje başlatıyor olun ister mevcut bir Pages Router projesini geçiriyor olun, bu adımlar size yol gösterecek.
1. Dosya Sistemi Yapısını Doğru Planlayın
App Router, app/ dizini altındaki dosya ve klasör yapısına göre otomatik olarak route oluşturur. İyi bir yapı planlaması, projenin sürdürülebilirliği için kritiktir.
- Klasörleri anlamlandırın: Her klasör bir route segmentini temsil eder. Örneğin,
app/blog/[slug]/page.tsx→/blog/:slug. - Group routing kullanın: Klasör adını parantez içine alarak (
(marketing)) URL'e yansıtmadan gruplama yapabilirsiniz. Bu, layout'ları organize etmek için idealdir. - Private klasörler: Alt çizgi ile başlayan klasörler (
_components) routing'e dahil edilmez, iç bileşenler için kullanılır. - Parallel routes: Aynı anda birden fazla sayfayı aynı layout içinde göstermek için
@modalgibi paralel route'lar kullanın.
2. Nested Layout'lar ile Tutarlı Tasarım
Layout'lar, sayfalar arasında paylaşılan UI öğelerini (header, sidebar) tekrar etmeden kullanmanızı sağlar.
- Root layout:
app/layout.tsxtüm sayfaları sarar. Buraya global stiller, fontlar ve metadata ekleyin. - Segment layout'ları: Belirli bir route segmentine özel layout oluşturmak için o klasöre
layout.tsxekleyin. Örneğin,app/dashboard/layout.tsxsadece dashboard sayfalarında geçerli olur. - Nested layout kullanırken dikkat: Layout'lar iç içe geçer, her layout kendi
childrenprop'unu render eder. Bu sayede her seviyede farklı wrapper'lar ekleyebilirsiniz. - Template vs Layout:
template.tsxher navigasyonda yeniden mount olurken, layout state korur. Geçiş animasyonları için template kullanmayı düşünün.
3. Loading ve Error Durumlarını Yönetin
Kullanıcı deneyimini iyileştirmek için loading ve error state'lerini App Router ile kolayca ekleyebilirsiniz.
- loading.tsx: Her segment klasörüne bir
loading.tsxdosyası ekleyerek o segment için otomatik loading UI'si oluşturun. Next.js, Suspense sınırları oluşturur. - error.tsx: Hata durumlarında gösterilecek UI.
useEffectile hata loglaması yapabilir,reset()fonksiyonu ile kullanıcıya yeniden deneme imkanı sunabilirsiniz. - global-error.tsx: Root layout seviyesinde yakalanamayan hatalar için (opsiyonel).
- İpucu: Async/await hata yönetimi ile server component'lerde try-catch kullanarak daha sağlam uygulamalar geliştirin.
4. Link ve Navigasyonu Doğru Kullanın
App Router, next/link ve useRouter ile gelişmiş navigasyon imkanları sunar.
- next/link:
Aboutile sayfalar arası geçişlerde tarayıcı yenilemesi olmadan hızlı navigasyon sağlar. Prefetch (varsayılan olarak production'da) ile sayfayı önceden yükler. - useRouter: Programatik navigasyon için
router.push(),router.replace(),router.back()yöntemlerini kullanın. - usePathname ve useSearchParams: Aktif yol ve query parametrelerine erişmek için kullanın. İstemci bileşenlerinde çalışır.
- Geri bildirim: Uzun süren navigasyonlarda loading state gösterin. App Router,
loading.tsxile otomatik yapar; elle müdahale etmeniz gerekmez.
5. Veri Çekme ve State Yönetimi
App Router, React Server Components ile sunucu taraflı veri çekmeyi destekler. State yönetimini buna göre planlayın.
- Server Components'ta veri çekme: async fonksiyonlarla doğrudan veritabanına veya API'ya erişin. Örneğin
const data = await fetchData(). - Client Components'ta veri çekme:
useEffectveya SWR/React Query gibi kütüphaneler kullanın.useAPI'si (React 19+) ile promise doğrudan kullanılabilir. - State yönetimi: Basit state'ler Context API ile yönetilebilir. Daha karmaşık durumlar için Context API vs Redux Toolkit karşılaştırması rehberimize göz atın.
- Cache ve revalidation: App Router,
fetchile otomatik cache yapar.revalidatePathveyarevalidateTagile ihtiyaç halinde cache'i temizleyin.
6. Kontrol Listesi: App Router Kurulumu ve Geçiş
- ✅
app/dizinini oluşturun veapp/layout.tsxroot layout'u ekleyin. - ✅ Her route segmenti için klasör ve
page.tsxoluşturun. - ✅ Paylaşılan UI'lar için nested layout'lar (ör. dashboard) ekleyin.
- ✅ Loading ve error durumları için
loading.tsx,error.tsxekleyin. - ✅
next/linkile tüm navigasyon bağlantılarını güncelleyin. - ✅ Server Component'lerde veri çekme işlemlerini async/await ile yapın.
- ✅ Client Component'leri
'use client'ile işaretleyin; state yönetimini uygun şekilde planlayın. - ✅ mevcut Pages Router projelerini geçirirken, Next.js vs Gatsby karşılaştırmasını inceleyerek ihtiyacınıza uygun seçenekleri değerlendirin.
- ✅ CSS Grid gibi modern layout teknikleri kullanıyorsanız, CSS Grid rehberimizden yararlanabilirsiniz.
Bu ipuçları ve kontrol listesi sayesinde Next.js App Router ile daha temiz, performanslı ve sürdürülebilir bir routing yapısı kurabilirsiniz. Projenize özel durumlar için her zaman resmi dokümantasyonu ve topluluk kaynaklarını takip edin.
Sık Sorulan Sorular
App Router ile Pages Router arasındaki temel fark nedir?
App Router, dosya tabanlı routing kullanır ve React Server Components destekler. Pages Router ise klasik React bileşenleriyle çalışır. App Router daha modern ve performanslıdır, ancak Pages Router hâlâ desteklenmektedir.
Nested layout'lar nasıl çalışır?
Her route segmenti için ayrı layout dosyası oluşturabilirsiniz. Layout'lar iç içe geçer; her layout kendi altındaki children'ı sarar. Bu sayede her seviyede farklı UI yapıları tanımlayabilirsiniz.
App Router'da global state yönetimi nasıl yapılır?
Server Component'lerde global state ihtiyacı yoktur çünkü veriler sunucuda çekilir. Client Component'lerde Context API veya Redux Toolkit gibi kütüphaneler kullanabilirsiniz. App Router ile Context API kullanmak için provider'ı root layout'a eklemeniz yeterlidir.
Page Router'dan App Router'a geçiş yapmalı mıyım?
Yeni projeler için App Router önerilir. Mevcut projelerde Pages Router hâlâ çalışır ve desteklenir, ancak App Router'a kademeli geçiş yaparak yeni özelliklerden faydalanabilirsiniz.
