Konten dalam Tata Letak Situs di NextJS

Mari kita perhatikan tata letak situs utama, yang telah kita mulai pelajari pada pelajaran sebelumnya:

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

Seperti yang Anda lihat, tata letak situs merupakan sebuah komponen dengan fungsi. Pada saat yang sama, sebuah objek diteruskan ke dalam parameter fungsi, dari mana kita mengekstrak kunci children ke dalam variabel yang sesuai. Variabel ini menyimpan isi dari file page.jsx, yang sesuai dengan URL yang diminta.

Artinya, di file layout.jsx kita menyimpan tata letak situs, dan dengan menggunakan variabel children kita menunjukkan tempat dalam tata letak situs, di mana konten halaman harus disisipkan.

Sebagai contoh, mari kita tempatkan konten halaman ke dalam suatu tag:

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