Conținut în layout-ul site-ului în NextJS

Să analizăm layout-ul principal al site-ului, pe care am început să-l studiem în lecția anterioară:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				{children}
			</body>
		</html>
	);
}

După cum vedeți, layout-ul site-ului reprezintă o componentă cu o funcție. În același timp, în parametrul funcției este transmis un obiect, din care extragem cheia children în variabila corespunzătoare. În această variabilă este stocat conținutul fișierului page.jsx, care corespunde URL-ului solicitat.

Adică în fișierul layout.jsx avem stocat layout-ul site-ului, iar cu ajutorul variabilei children indicăm locul în layout-ul site-ului, în care trebuie să fie introdus conținutul paginii.

De exemplu, să formatăm conținutul paginii într-o anumită etichetă:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<main>
					{children}
				</main>
			</body>
		</html>
	);
}

Formatați conținutul site-ului dvs. în eticheta main.