NextJS-те кирүүлөштүрүлгөн макеттер

Билген сыяктуу, /app папкасындагы /layout.jsx файлында сайттын негизги макети жайгашкан.

Каалоо боюнча, бирок, кирүүлөш папкаларда өз макеттериңизди түзө аласыз. Бул учурда барактын мазмуну алгач кирүүлөштүрүлгөн макетке киргизилет, андан кийин чыккан натыйжа негизги макетке киргизилет.

Келгиле иш жүзүндө көрөлү. Биздин негизги макет төмөнкүдөй көрүнүшкө ээ болсун:

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

Келгиле дагы бир, кирүүлөштүрүлгөн макетти /users папкасындагы бардык мазмундар үчүн жасайлы:

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

Көрүп тургандай, бул макетте биз барактын негизги тегдерин көрсөтпөйбүз, анткени алар биздин сайттын негизги макетинде мурунтан эле бар.

Келгиле ошондой эле колдонуучуну көрсөтүү үчүн мазмун файлын жасайлы:

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

Бул манипуляциялардан кийин биздин файлдык түзүлүшү төмөнкүдөй көрүнөт:

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

Эми, тиешелүү URL боюнча өтсөк, NextJS баарын чогултат жана браузерде биз төмөнкүдөй жалпы HTML кодун алабыз:

<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>

Сайтта колдонуучулар бөлүмүн жана посттор бөлүмүн жасаңыз. Ар бир бөлүмдө сайттын негизги макетинен мурастаган өз макетиңизди жасаңыз.