Next.js Page Router ve App Router: Farklar, Amaçlar ve Öneriler

Next.js, React tabanlı modern web uygulamaları geliştirmek için kullanılan popüler bir framework'tür. Zaman içinde Next.js'nin mimarisi değişti ve iki farklı yönlendirme (routing) modeli ortaya çıktı: Page Router (sayfa yönlendirme) ve App Router (uygulama yönlendirme). Bu yazıda, her iki sistemin farklarını, amaçlarını ve günümüzde hangi yöntemin tercih edilmesi gerektiğini detaylıca ele alacağız.

📌 Page Router Nedir?

Page Router, Next.js'in eski yönlendirme sistemidir ve Next.js 13'ten önce varsayılan olarak kullanılıyordu. pages/ dizini içinde yer alan her dosya otomatik olarak bir route (yönlendirme) oluşturur.

🎯 Page Router'ın Özellikleri

• Dosya tabanlı yönlendirme: pages/index.js → /, pages/about.js → /about gibi çalışır.
• getStaticProps ve getServerSideProps desteği: Sayfa bazlı veri getirme fonksiyonları ile dinamik veya statik içerikler oluşturulabilir.
• API Routes: pages/api/ dizini altında API endpoint'leri tanımlanabilir.
• Custom _app.js ve _document.js: Uygulamanın genel düzenini özelleştirmek için kullanılır.
• Client-Side Navigation (Müşteri Tarafı Gezinme): next/link ve next/router kullanılarak sayfalar arası geçişler optimize edilir.

🛠 Page Router Kullanım Alanları

• Küçük ve orta ölçekli projeler
• CSR (Client-Side Rendering) ağırlıklı uygulamalar
• Klasik Next.js projeleriyle uyumluluk gerektiren durumlar

🔥 App Router Nedir?

App Router, Next.js 13 ile tanıtılan ve Next.js 14 ile geliştirilen yeni yönlendirme sistemidir. app/ dizini içinde yer alır ve React Server Components (RSC) ile derinlemesine entegrasyon sağlar.

🚀 App Router'ın Özellikleri

• Sunucu Bileşenleri (Server Components): Varsayılan olarak sunucu tarafında çalışır, böylece daha az istemci tarafı JavaScript yüklenir.
• Layout Desteği: Dosya sistemi tabanlı layout.tsx ile sayfalar arasında paylaşılabilen düzenler oluşturulabilir.
• Sunucu Taraflı Veri Getirme (Server Actions): React'in yeni API'leriyle veri işleme süreci daha verimli hale gelir.
• Middleware Desteği: Kenar işleme (Edge Functions) ile daha hızlı ve esnek yönlendirme yapılabilir.
• API Routes yerine Route Handlers: Artık app/api/ altında daha esnek API endpoint'leri oluşturulabilir.

🔥 App Router Kullanım Alanları

• Büyük ölçekli ve karmaşık projeler
• SSR (Server-Side Rendering) ve RSC (React Server Components) kullanmak isteyen projeler
• Daha performanslı ve optimize edilmiş uygulamalar

📊 Page Router ve App Router Karşılaştırma Tablosu

❓ Page Router mı, App Router mı Kullanmalıyım?

• Yeni bir proje geliştiriyorsanız, App Router kullanmanız önerilir. Daha performanslıdır ve yeni Next.js özelliklerinden tam olarak faydalanabilirsiniz.
• Eski projelerde Page Router kullanıyorsanız, aceleyle App Router'a geçmek zorunda değilsiniz. Ancak, uzun vadede App Router'a geçiş planlanmalıdır.
• API Routes yoğun kullanan projelerde, App Router'ın yeni app/api/ yapısına geçiş sürecini iyi analiz etmek önemlidir.
• Müşteri tarafı işlemler ağırlıklı olan uygulamalar için, Page Router bazı durumlarda hala daha uygun olabilir.

🎯 Sonuç

Next.js, geliştiricilere hem eski hem de yeni yönlendirme yöntemlerini destekleyerek esneklik sunuyor. Page Router hala destekleniyor ancak gelecekte tamamen App Router'a geçiş bekleniyor. Bu nedenle yeni projeler için App Router tercih edilmelidir. Mevcut projelerde ise mümkün olduğunca App Router’a geçiş süreci planlanmalıdır.

Eğer büyük bir geçiş süreci yaşıyorsanız veya belirli bir özelliğin nasıl taşınacağı konusunda emin değilseniz, Next.js belgelerini inceleyerek ve küçük test projeleri oluşturarak kendinizi bu yeni sisteme alıştırabilirsiniz. 🚀