Standaard lay-out in NextJS

In de vorige les hebben we ontdekt dat we een algemene lay-out voor de site moeten hebben, waarin de inhoud, titel en metabeschrijving van de pagina worden ingevoegd. NextJS heeft standaard al een bestand met de algemene lay-out van de site. Het bevindt zich in het bestand app/layout.jsx.

Na installatie staat er al enkele code in het lay-outbestand. Deze code bevat echter veel overbodigs. Laten we een minimale sitelay-out maken die gemakkelijk te begrijpen is. Open hiervoor het lay-outbestand, verwijder alles eruit en plak het volgende:

app/layout.jsxexport const metadata = {
  title: 'Test site',
  description: 'This is my page description.',
};

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}