App Router
- React kursu
- İleri seviye
- Ders 2/56
- 4 dk
Yeni App Router yapısını ve dosya tabanlı rotaları öğrenirsin.
App Router
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.
Uygulama Kök layout yaz
RootLayout bileşeni yaz: { children } propunu destructure et, <html><body>{children}</body></html> döndür. export default RootLayout.
Başlangıç kodu
// app/layout.js
// RootLayout bileşenini buraya yazÖrnek çözüm
// app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Layout nerede tanımlanır?
- app/route.js
- app/layout.js Doğru cevap
- app/style.css
- app/config.json
Açıklama: app/layout.js layout'u tanımlar.
2 Layout dosyası
// app/____.js
export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}// app/layout.js
export default function RootLayout({ children }) {
return <html><body>{children}</body></html>;
}Açıklama: app/layout.js kök layout'tür.
3 App Router: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
page.js |
Sayfa içeriği |
layout.js |
Çerçeve |
[id] |
Dinamik parametre |
app/ |
Rota kökü |