Özet - Next.js temelleri
- React kursu
- İleri seviye
- Ders 4/56
- 5 dk
Ana sayfa ve hakkında sayfası olan bir Next.js iskeleti kurarsın.
Özet - Next.js temelleri
Bu grupta Next.js'in ne olduğunu, App Router'ı, sayfa ve layout yapısını gördün. app/ dizini rota kökü, page.js sayfa içeriği, layout.js çerçevedir.
Layout'lar üst üste biner; {children} alt seviyeye aktarılır. Kök layout <html> ve <body> içermelidir.
Şimdi öğrendiklerini bir araya getir: kök layout ve bir anasayfa yaz.
Uygulama Anasayfa ve layout
RootLayout bileşeni yaz: { children } destructure et, <html><body>{children}</body></html> döndür, export default RootLayout. Home bileşeni yaz: <main> içinde <h1>Next.js'e hoş geldiniz</h1> ve <p>İlk sayfanız.</p> bas, export default Home.
Başlangıç kodu
// app/layout.js ve app/page.js
// RootLayout ve Home buraya yazÖrnek çözüm
// app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}
// app/page.js
export default function Home() {
return (
<main>
<h1>Next.js'e hoş geldiniz</h1>
<p>İlk sayfanız.</p>
</main>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Next.js avantajı değil?
- Dosya tabanlı rota
- SSR ve SSG desteği
- Server Components
- Veritabanı sunucusu olması Doğru cevap
Açıklama: Next.js veritabanı sunucusu değildir.
2 Kök layout zorunlu etiketleri
export default function RootLayout({ children }) {
return (
<____>
<body>{children}</body>
</html>
);
}export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}Açıklama: html ve body kök layout'ta zorunludur.