Next.js'in iki yönlendirme sistemi vardır. Pages Router (pages/) orijinali; App Router (app/, Next 13'ten beri) React Server Components etrafında inşa edilen daha yeni, önerilen sistemdir.
Next.js'in iki yönlendirme sistemi vardır. Pages Router (pages/) orijinali; App Router (app/, Next 13'ten beri) React Server Components etrafında inşa edilen daha yeni, önerilen sistemdir.
Pages Router (pages/) App Router (app/)
──────────────────────────────────────────────────────
pages/about.tsx → /about app/about/page.tsx → /about
Default export = page page.tsx = page, layout.tsx = layout
getServerSideProps (SSR) async Server Components (fetch directly)
getStaticProps (SSG) fetch() with caching options
_app.tsx / _document.tsx Nested layout.tsx files
All components client-rendered Server Components by default
// App Router — a Server Component that fetches data directly, no extra API
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // runs on the SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
App Router'da, bileşenler varsayılan olarak Server Components'dir — sunucuda çalışırlar, doğrudan veri await edebilirler ve o bileşen için tarayıcıya sıfır JS gönderirler. Pages Router bunun yerine verileri istemci tarafından render edilen sayfalara aktarmak için özel işlevler (getServerSideProps) kullanmıştır.
layout.tsx).loading.tsx / Suspense ile.Yeni projeler için App Router kullanın — burası Next.js geliştirmesinin odaklandığı yerdir. Pages Router hala desteklenmektedir (ve her ikisi bir uygulamada birlikte bulunabilir) fakat esasen bakım modundadır.
App Router, Next.js'in mevcut mimarisini (Server Components, iç içe geçmiş düzenler, streaming) temsil eder.
Legacy Pages Router'dan nasıl farklı olduğunu — özellikle server-first varsayılanı ve layout modelini — bilmek, herhangi bir modern Next.js codebase'inde çalışmak için gereklidir.