Innhold i nettstedets layout i NextJS
La oss vurdere hovedlayouten for nettstedet, som vi begynte å analysere i forrige leksjon:
export 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:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
Plasser innholdet på nettstedet ditt
i taggen main.
