Innehåll i webbplatslayout i NextJS

Låt oss titta på webbplatsens huvudsakliga layout, som vi började gå igenom i förra lektionen:

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

Som du ser representerar webbplatslayouten en komponent med en funktion. Samtidigt skickas ett objekt in i funktionens parameter, varifrån vi extraherar nyckeln children till motsvarande variabel. I denna variabel lagras innehållet i filen page.jsx, som motsvarar den efterfrågade URL:en.

Det vill säga, i filen layout.jsx har vi webbplatsens layout lagrad, och med hjälp av variabeln children anger vi platsen i webbplatslayouten där sidans innehåll ska infogas.

Låt oss som ett exempel omsluta sidans innehåll i någon tagg:

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