Innhold i nettstedets layout i NextJS

La oss vurdere hovedlayouten for nettstedet, som vi begynte å analysere i forrige leksjon:

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

Som du ser, representerer nettstedets layout en komponent med en funksjon. Samtidig overføres et objekt til funksjonsparameteren, hvordan vi henter nøkkelen children inn i den tilsvarende variabelen. I denne variabelen lagres innholdet i filen page.jsx, som tilsvarer den forespurte URL-en.

Det vil si at i filen layout.jsx har vi lagret nettstedets layout, og ved hjelp av variabelen children angir vi stedet i nettstedets layout der sidens innhold skal settes inn.

La oss for eksempel plassere sidens innhold i en tag:

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