Sisältö sivuston asettelussa NextJS:ssä
Tarkastellaan pääasiallista sivuston asettelua, jota aloimme käsitellä edellisessä oppitunnissa:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Kuten näet, sivuston asettelu edustaa
komponenttia, jossa on funktio. Samalla
funktion parametriin välitetään objekti,
josta poimimme avaimen children
vastaavaan muuttujaan.
Tässä muuttujassa säilytetään
tiedoston page.jsx sisältö,
joka vastaa pyydettyä URL-osoitetta.
Eli tiedostossa layout.jsx meillä
säilytetään sivuston asettelu, ja avulla
muuttujan children me osoitamme
paikan sivuston asettelussa, johon sivun
sisällön tulee lisätä.
Esimerkkinä muotoillaan sivun sisältö johonkin tagiin:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
Muotoile sivustosi sisältö
tagiin main.
