NextJS-da Ichki Maketlar

Ma'lumki, /app papkasida /layout.jsx faylida saytning asosiy maketi joylashgan.

Agar xohlasangiz, ichki papkalarda o'zingizning maketlaringizni yaratishingiz mumkin. Bunda sahifa kontenti avval ichki maketga joylashtiriladi, so'ngra hosil bo'lgan natija asosiy maketga joylashtiriladi.

Keling, amalda sinab ko'raylik. Faraz qilaylik, bizning asosiy maketimiz quyidagi ko'rinishga ega:

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

Keling, /users papkasidagi barcha kontentlar uchun yana bir ichki maket yarataylik:

export default function UsersLayout({children}) {
	return (
		<div className="info">
			message for all users
		</div>
		<div className="content">
			{children}
		</div>
	);
}

Ko'rib turganingizdek, ushbu maketda biz sahifaning asosiy teglarini ko'rsatmaymiz, chunki ular allaqachon saytimizning asosiy maketida mavjud.

Keling, shuningdek, foydalanuvchini ko'rsatish uchun kontent faylini yarataylik:

export default function User() {
	return <>
		<h1>User</h1>
		<p>
			user description
		</p>
	</>;
}

Ushbu manipulyatsiyalardan so'ng bizning fayl tuzilmamiz quyidagicha ko'rinadi:

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

Endi, mos URL manziliga murojaat qilinsa, NextJS hammasini birlashtiradi va brauzerda biz quyidagi yakuniy HTML kodni olamiz:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				message for all users
			</div>
			
			<h1>User</h1>
			<p>
				user description
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Saytingizda foydalanuvchilar bo'limi va postlar bo'limini yarating. Har bir bo'limda saytning asosiy maketidan meros oladigan o'zining maketini yarating.