Next.js 14/15 App Router: Page Router’ı Server Component’a Çevirme Promptları
Vercel’in Next.js 14 ve 15 ile standartlaştırdığı App Router mimarisi, web performansını ve SEO metriklerini baştan yazıyor. Ancak eski nesil pages/ klasöründeki React kodlarını doğrudan app/ klasörüne taşımak, React Server Components (RSC) mimarisinin sunduğu hız ve minimalist yapıdan tam faydalanamamak demektir.
Eski Page Router kodlarınızı sıfırdan yazmak yerine, doğru sınırlar (Client Boundary) çizerek modern App Router yapısına kusursuzca entegre etmenizi sağlayacak iki aşamalı refactoring promptunu aşağıda bulabilirsiniz. Flarum veya benzeri Markdown destekli platformlarınıza doğrudan kopyalayabilirsiniz.
1. Analiz ve Sınır Çizme (Boundary) Promptu
Bu prompt, eski kodunuzu doğrudan dönüştürmeden önce, hangi parçaların sunucuda kalması (Server Component) ve hangi parçaların tarayıcıya gönderilmesi (Client Component) gerektiğini analiz eden bir mimar gibi çalışır. JavaScript bundle boyutunu minimumda tutmak için kritik bir adımdır.
Prompt: "Sen Vercel altyapısına ve Next.js 14/15 App Router (React Server Components) mimarisine tam hakim Kıdemli bir Yazılım Mimarı’sın.
Aşağıda Next.js ‘Page Router’ mimarisiyle yazılmış eski bir bileşen kodum var. Senden doğrudan kodu yeniden yazmanı İSTEMİYORUM. Önce şu analizleri yapmanı istiyorum:
Bileşen Ayrıştırma: Bu kod içindeki hangi statik yapılar ve veri çekme işlemleri (eskiden getServerSideProps/getStaticProps olanlar) %100 Server Component olarak kalabilir?
Client Boundary (İstemci Sınırı): Kodun içindeki hangi spesifik etkileşimler (useState, useEffect, onClick) yüzünden ayrı bir ‘Client Component’ oluşturmamız gerekiyor? Tarayıcıya gönderilecek JavaScript yükünü nasıl en aza indirebiliriz?
Veri Çekme Stratejisi: Eski veri çekme mantığını, yeni native ‘fetch’ API’si ve caching mekanizmalarıyla nasıl optimize edeceğimizi adım adım açıkla.
Page Router Kodum: [Eski React Kodunuzu Buraya Yapıştırın]"
2. ‘Clean Code’ Refactoring (Kod Dönüşüm) Promptu
Analiz aşamasından sonra, AI’dan kodu modern, güvenli ve Vercel’in minimalist tasarım prensiplerine uygun şekilde parçalayarak yeniden yazmasını istediğimiz aşamadır.
Prompt: "Bir önceki analizine dayanarak, sana verdiğim eski Page Router kodunu Next.js 14/15 App Router standartlarında tamamen yeniden yaz. Kodu yazarken şu ‘Clean Code’ kurallarına KESİNLİKLE uymalısın:
Server First: Ana bileşen (page.tsx veya layout.tsx) varsayılan olarak Server Component olmalıdır. Veri çekme işlemleri burada asenkron (async/await) fonksiyonlarla doğrudan yapılmalı, getServerSideProps vb. ESKİ METOTLAR KULLANILMAMALIDIR.
Mikro Client Bileşenleri: Sadece ‘use client’ direktifine ihtiyaç duyan etkileşimli parçaları (butonlar, formlar, stateler) ayrı, küçük bileşenler (örneğin: ActionButtons.tsx) olarak ayır ve kodlarını ayrı kod blokları halinde ver.
SEO ve Metadata: Ana Server Component dosyasına, Next.js 15 standartlarına uygun dinamik veya statik ‘Metadata’ export objesini mutlaka ekle.
Performans: Suspense sınırlarını () verimli kullanarak sayfanın ilk yüklenme (FCP) hızını optimize et.
Lütfen ‘İşte kodunuz’ gibi gereksiz cümleler kurma. Doğrudan dosya isimlerini (Örn: app/page.tsx, components/InteractiveUI.tsx) başlık yaparak temiz, okunabilir kod bloklarını sun."
Bu Yaklaşım Projenize Ne Katar?
Sıfır Hydration Sorunu: İstemci (Client) ve Sunucu (Server) sınırlarını baştan belirlediğiniz için, React’in klasikleşmiş hydration hatalarıyla karşılaşmazsınız.
Maksimum Hız ve Core Web Vitals: Etkileşimsiz tüm UI öğeleri sunucuda render edilip HTML olarak gönderilir. Bu, Vercel üzerinde barındırılan projelerde inanılmaz bir sayfa yükleme hızı ve yüksek Google PageSpeed skorları (E-E-A-T için dolaylı teknik sinyal) anlamına gelir.
Bakım Kolaylığı (Maintainability): Karmaşık, spagetti halini almış devasa Page dosyaları yerine; veri çeken sunucu dosyaları ile kullanıcıyla etkileşime giren istemci dosyaları birbirinden izole edilmiş olur.
