Zawartość w układzie strony w NextJS
Rozważmy główny układ strony, który zaczęliśmy analizować w poprzedniej lekcji:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Jak widzisz, układ strony przedstawia
sobie komponent z funkcją. Przy tym
w parametr funkcji przekazywany jest obiekt,
z którego wyodrębniamy klucz children
do odpowiedniej zmiennej.
W tej zmiennej przechowywana jest
zawartość pliku page.jsx,
który odpowiada żądanemu URL.
Czyli w pliku layout.jsx u nas
przechowywany jest układ strony, a za pomocą
zmiennej children wskazujemy
miejsce w układzie strony, w które powinna
wstawić się zawartość strony.
Dla przykładu oceńmy zawartość strony w jakiś tag:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
Oceń zawartość twojej
strony w tagu main.
