Next.js 15 App Router'a Geçiş: Gerçek Bir Migration Hikayesi
Bir SaaS müşterimizin Pages Router'dan App Router'a geçişini, ne yaptığımızı ve yaparken neyi keşke daha önce bilseydik dediğimizi anlatıyoruz.
Esra Demir
Kıdemli Yazılım Mühendisi
App Router'a geçiş dokümanlardaki kadar lineer değil. 2024'te başladığımız ve şu an üretimde olan bir müşteri projemizin migration süreci yedi haftadan dokuz haftaya çıktı — sebepleri ve aldığımız dersleri özetleyelim.
Başlamadan önce ne sandık?
Sayfa bazlı, kademeli geçiş yapacağımızı düşünüyorduk. App Router ve Pages Router'ı aynı projede yaşatmak Next.js tarafından destekleniyor, dolayısıyla 'önce statik sayfalar, sonra dashboard, en son auth' planı kağıt üzerinde mantıklıydı.
İlk şok: getServerSideProps mantığı tamamen yeniden yazılır
App Router'da route-level data fetching artık RSC içinde olur. Bu kavramsal olarak güzel; ama Pages tarafındaki paylaşılan veri yardımcılarımız (auth, locale, feature flag) doğrudan taşınmıyor. Her şeyi headers(), cookies() ve middleware üzerinden yeniden modellemek gerekti.
Streaming ve loading.tsx — yeni süper güç
Bu kısım gerçekten beklediğimiz kadar iyiydi. Üretimde TTFB'de ~%35 iyileşme aldık. Dashboard'un üst kısmı (header + nav) anında render oluyor, body kısmı Suspense ile geç render edilebiliyor. Kullanıcı algısı dramatik şekilde değişti.
Server Actions: kullanırken dikkat
- Hata yönetimi açık değil — try/catch ile sarın ve sonucu form state'e döndürün.
- Optimistic UI ile çok iyi çalışıyor, ama useFormStatus ve useFormState'i öğrenmek gerekiyor.
- Rate limiting'i kendiniz koymak zorundasınız.
Almak istediğimiz ders
Migration'ı projenin diğer iş yükleriyle paralel yapmaya çalıştık. Bu yanlıştı. Önümüzdeki sefer en az 2 sprint'i sadece migration'a ayırırız ve müşteriye 'bu süre içinde feature gelmez' diye netçe söyleriz.