App Router

Yeni App Router yapısını ve dosya tabanlı rotaları öğrenirsin.

App Router, Next.js 13'ten beri önerilen rota sistemidir. app/ dizininde çalışır; her klasör bir yol segmenti, her page.js bir sayfadır.

Eski pages/ dizini hâlâ desteklenir ama yeni projeler App Router ile başlamalıdır. İkisi karışmaz; App Router önceliklidir.

App Router, Server Components'i varsayılan yapar; bu da performansı artırır.

İç içe rotalar

App Router'da klasör yapısı rotaları iç içe yapar. app/blog/[id]/page.js dinamik bir rota verir; [id] bir URL parametresidir.

Her klasöre bir layout.js koyabilirsin; bu layout altındaki tüm sayfaları sarar. Üst layout da alt layout'u sardığı için çerçeveler iç içe geçer.

Bu yapı, sayfalar arası ortak UI'ı (üst menü, alt bilgi) yönetmeyi kolaylaştırır.

RootLayout bileşeni yaz: { children } propunu destructure et, <html><body>{children}</body></html> döndür. export default RootLayout.

Örnek çözümü göster

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

Layout dosyası

// app/____.js
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

Cevabı göster

// app/layout.js
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

Sıradaki ders: Sayfa ve layout