Կոնտենտը կայքի դասավորության մեջ NextJS-ում

Դիտարկենք կայքի հիմնական դասավորությունը, որը մենք սկսեցինք քննարկել նախորդ դասում.

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

Ինչպես տեսնում եք, կայքի դասավորությունը ներկայացնում է ինքն իրեն ֆունկցիա ունեցող կոմպոնենտ: Ընդ որում ֆունկցիայի պարամետրին փոխանցվում է օբյեկտ, որից մենք հանում ենք children բանալին համապատասխան փոփոխականի մեջ: Այս փոփոխականում պահվում է page.jsx ֆայլի պարունակությունը, որը համապատասխանում է հարցված URL-ին:

Այսինքն layout.jsx ֆայլում մեր մոտ պահվում է կայքի դասավորությունը, իսկ children փոփոխականի օգնությամբ մենք նշում ենք տեղը կայքի դասավորության մեջ, որտեղ պետք է տեղադրվի էջի կոնտենտը:

Օրինակի համար եկեք ձևավորենք էջի կոնտենտը ինչ-որ թեգի մեջ.

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

Կայքիդ կոնտենտը ձևավորեք main թեգի մեջ: