Përmbajtja në Layout të Faqes në NextJS

Le të shqyrtojmë layout-in bazë të faqes, të cilin e filluam të shqyrtojmë në mësimin e kaluar:

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

Siç e shihni, layout-i i faqes përfaqëson një komponent me funksion. Në të njëjtën kohë në parametrin e funksionit i transmetohet një objekt, nga i cili nxjerrim çelësin children në variablin përkatës. Në këtë variabël ruhet përmbajtja e skedarit page.jsx, i cili i përgjigjet URL-së së kërkuar.

Domethënë në skedarin layout.jsx tek ne ruhet layout-i i faqes, ndërsa me ndihmën e variablit children ne tregojmë vendin në layout-in e faqes, në të cilin duhet të futet përmbajtja e faqes.

Për shembull le të formatizojmë përmbajtjen e faqes në ndonjë tag:

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

Formatizoni përmbajtjen e faqes suaj në tag-un main.