Özet - Next.js temelleri

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.

Örnek çözümü göster

// 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>
  );
}

Kendini test et

Next.js avantajı değil?
- Dosya tabanlı rota
- SSR ve SSG desteği
- Server Components
- Veritabanı sunucusu olması
Cevabı göster

Veritabanı sunucusu olması — Next.js veritabanı sunucusu değildir.

Kök layout zorunlu etiketleri

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

Cevabı göster

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

Sıradaki ders: SSR nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler