Tartalom a weboldal elrendezésében NextJS-ben

Vizsgáljuk meg a weboldal fő elrendezését, amelyet az előző leckében kezdtünk el elemezni:

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

Amint látod, a weboldal elrendezése egy funkcióval rendelkező komponens. Eközben a függvény paraméterébe egy objektum kerül átadásra, amelyből kivonjuk a children kulcsot a megfelelő változóba. Ebben a változóban tárolódik a page.jsx fájl tartalma, amely megfelel a kért URL-nek.

Vagyis a layout.jsx fájlban tároljuk a weboldal elrendezését, és a children változó segítségével jelöljük meg a weboldal elrendezésében azt a helyet, ahová az oldal tartalmának be kell illeszkednie.

Példaként formázzuk az oldal tartalmát valamilyen tagbe:

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

Formázd a weboldalad tartalmát a main tagbe.