Indhold i webstedslayout i NextJS

Lad os overveje hovedlayoutet for webstedet, som vi begyndte at analysere i den forrige lektion:

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

Som du kan se, er webstedets layout en komponent med en funktion. Samtidig overføres et objekt til funktionens parameter, hvorfra vi udtrækker nøglen children i den tilsvarende variabel. Denne variabel indeholder indholdet af filen page.jsx, som svarer til den anmodede URL.

Det vil sige, at i filen layout.jsx opbevarer vi webstedets layout, og ved hjælp af variablen children angiver vi stedet i webstedets layout, hvor sidens indhold skal indsættes.

Lad os for eksempel indkapsle sidens indhold i et eller andet tag:

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