Obsah v rozložení webu v NextJS
Podívejme se na základní rozložení webu, které jsme začali rozebírat v minulé lekci:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Jak vidíte, rozložení webu představuje
komponentu s funkcí. Přitom
do parametru funkce je předán objekt,
ze kterého extrahujeme klíč children
do odpovídající proměnné.
V této proměnné je uložen
obsah souboru page.jsx,
který odpovídá požadovanému URL.
To znamená, že v souboru layout.jsx je u nás
uloženo rozložení webu, a pomocí
proměnné children určujeme
místo v rozložení webu, do kterého musí
být vložen obsah stránky.
Jako příklad pojďme upravit obsah stránky do nějakého tagu:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
Upravte obsah vašeho
webu v tagu main.
