Các phần của trang web trong bố cục chính của NextJS

Hãy cùng xem bố cục trang web của chúng ta. Hiện tại, trong đó có lệnh chèn nội dung thay đổi của trang:

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

Tuy nhiên, một trang web thường còn có những phần khác không thay đổi cho các trang khác nhau. Ví dụ, đó có thể là header và footer. Hãy thêm chúng vào bố cục của chúng ta:

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