Inhoud in de sitelayout in NextJS

Laten we de hoofdlayout van de website bekijken, die we zijn begonnen te bespreken in de vorige les:

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

Zoals je ziet, is de sitelayout een component met een functie. Hierbij wordt een object doorgegeven aan de parameter van de functie, waaruit we de sleutel children in de bijbehorende variabele extraheren. In deze variabele wordt de inhoud van het bestand page.jsx opgeslagen, dat overeenkomt met de opgevraagde URL.

Dat betekent dat in het bestand layout.jsx de sitelayout is opgeslagen, en met behulp van de variabele children geven we de plaats in de sitelayout aan, waar de inhoud van de pagina moet worden ingevoegd.

Laten we bijvoorbeeld de inhoud van de pagina in een tag plaatsen:

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