NextJS'te Site Düzeninde İçerik

Bir önceki derste incelemeye başladığımız temel site düzenini ele alalım:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Gördüğünüz gibi, site düzeni bir fonksiyon componentidir. Ayrıca, fonksiyona bir nesne parametre olarak geçirilir ve bu nesneden ilgili değişkene children anahtarı çıkarılır. Bu değişkende, istenen URL'ye karşılık gelen page.jsx dosyasının içeriği bulunur.

Yani, layout.jsx dosyasında site düzeni saklanır ve children değişkeni ile sayfa içeriğinin site düzeninde eklenmesi gereken yeri belirtiriz.

Örnek olarak, sayfa içeriğini bir etiket içine yerleştirelim:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <main>
          {children}
        </main>
      </body>
    </html>
  );
}