Miundo Iliyojumuishwa katika NextJS

Kama unavyojua, katika folda /app katika faili /layout.jsx ndio mnao mkuu wa tovuti.

Kwa hiari, hata hivyo, katika folda zilizojumuishwa unaweza kuunda miundo yako mwenyewe. Katika kesi hii, yaliyomo kwenye ukurasa kwanza yataingizwa kwenye muundo uliojumuishwa, kisha matokeo yaliyopatikana yataingizwa kwenye muundo mkuu.

p> Hebu tujaribu kwa vitendo. Acha muundo wetu mkuu uwe na muonekano ufuatao:

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

Hebu tufanye muundo mwingine, uliokunjwa kwa yaliyomo yote kutoka folda /users:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			ujumbe kwa watumiaji wote
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Kama unavyoona, katika muundo huu hatutaji vitambulisho kuu vya ukurasa, kwa sababu tayari vipo kwenye muundo wetu mkuu wa tovuti.

Hebu pia tufanye faili iliyo na yaliyomo kwa ajili ya kuonyesha mtumiaji:

export default function User() {
	return <>
		<h1>Mtumiaji</h1>
		<p>
			maelezo ya mtumiaji
		</p>
	</>;
}

Baada ya michakato hii, muundo wetu wa faili utaonekana kama hivi:

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

Sasa, ikiwa utaingia kwenye URL inayofanana, NextJS itakusanya yote pamoja na kwenye kivinjari tutapata msimbo wa HTML wa mwisho ufuatao:

<html lang="en">
	<body>
		<header>
			kichwa
		</header>
		<main>
			<div class="info">
				ujumbe kwa watumiaji wote
			</div>
			
			<h1>Mtumiaji</h1>
			<p>
				maelezo ya mtumiaji
			</p>
		</main>
		<footer>
			kiunyo
		</footer>
	</body>
</html>

Tengeneza sehemu ya watumiaji kwenye tovuti yako na sehemu ya machapisho. Fanya muundo wako mwenyewe katika kila sehemu ambao utarithi kutoka kwa muundo mkuu wa tovuti.