Obsah v rozložení stránky v NextJS
Pozrime sa na základné rozloženie stránky, ktoré sme začali rozoberať v predchádzajúcej lekcii:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Ako vidíte, rozloženie stránky predstavuje
komponent s funkciou. Pritom
do parametra funkcie sa odovzdáva objekt,
z ktorého extrahujeme kľúč children
do príslušnej premennej.
V tejto premennej je uložený
obsah súboru page.jsx,
ktorý zodpovedá požadovanej URL.
To znamená, že v súbore layout.jsx je
uložené rozloženie stránky a pomocou
premennej children určujeme
miesto v rozložení stránky, do ktorého sa má
vložiť obsah stránky.
Napríklad, naformátujme obsah stránky do nejakého tagu:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
Naformátujte obsah vašej
stránky do tagu main.
