Paraqitjet e mbivendosura në NextJS

Siç e dini, në dosjen /app në skedarin /layout.jsx ndodhet paraqitja kryesore e faqes.

Sidoqoftë, nëse dëshironi, në dosjet e mbivendosura mund të krijoni paraqitjet tuaja. Në këtë rast, përmbajtja e faqes do të futet së pari në paraqitjen e mbivendosur, dhe pastaj rezultati i përftuar do të futet në paraqitjen kryesore.

Le ta provojmë në praktikë. Le të supozojmë se paraqitja jonë kryesore ka pamjen e mëposhtme:

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

Le të bëjmë një tjetër, paraqitje të mbivendosur për të gjitha përmbajtjet nga dosja /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			mesazh për të gjithë përdoruesit
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Siç e shihni, në këtë paraqitje ne nuk përcaktojmë etiketat kryesore të faqes, pasi ato janë tashmë në paraqitjen tonë kryesore të faqes.

Le të bëjmë gjithashtu një skedar me përmbajtje për të shfaqur përdoruesin:

export default function User() {
	return <>
		<h1>Përdoruesi</h1>
		<p>
			përshkrimi i përdoruesit
		</p>
	</>;
}

Pas këtyre manipulimeve, struktura jonë e skedarëve do të duket kështu:

/app/
- layout.jsx
- /users/
  - layout.jsx
  - /show/
    - page.jsx

Tani, nëse i drejtohemi URL-it përkatës, NextJS do t'i mbledhë të gjitha së bashku dhe në shfletues ne do të marrim kodin përfundimtar HTML të mëposhtëm:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				mesazh për të gjithë përdoruesit
			</div>
			
			<h1>Përdoruesi</h1>
			<p>
				përshkrimi i përdoruesit
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Krijoni një seksion me përdorues dhe një seksion me postime në faqe. Krijoni në çdo seksion paraqitjen e vet, e cila do të trashëgojë nga paraqitja kryesore e faqes.