Parties du site dans la mise en page principale dans NextJS

Regardons notre mise en page de site. Actuellement, elle contient la commande pour insérer le contenu variable de la page :

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

Cependant, un site web a généralement d'autres parties qui restent inchangées pour les différentes pages. Par exemple, il peut y avoir un en-tête et un pied de page. Ajoutons-les à notre mise en page :

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