Bagian Situs dalam Layout Utama di NextJS

Mari kita lihat layout situs kita. Saat ini di dalamnya terdapat perintah untuk menyisipkan konten halaman yang berubah:

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

Namun, biasanya di situs masih ada bagian-bagian lain yang tetap tidak berubah untuk berbagai halaman. Misalnya, ada header dan footer. Mari tambahkan mereka ke layout kita:

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