Layout: Kerangka Bersama

Kenapa butuh layout?

Hampir semua halaman punya header dan footer yang sama. Menyalinnya ke setiap halaman melelahkan. Di Next.js, cukup tulis di layout.js.

Bentuk layout

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="id">
      <body>
        <header>KelasIT</header>
        <main>{children}</main>
        <footer>© 2026</footer>
      </body>
    </html>
  );
}

Apa itu children?

children adalah isi halaman yang sedang dibuka. Anggap saja lubang kosong: halaman Beranda, Tentang, atau Blog masuk ke lubang itu bergantian, sedangkan header dan footer tidak berubah.

Layout utama (app/layout.js) wajib ada dan wajib memuat <html> dan <body>. Folder lain juga boleh punya layout sendiri.

Pada latihan ini kita mengerjakan bagian di dalam <body> saja.