Макетҳои дар 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>

Дар сайти худ бахши корбарон ва бахши паёмҳо созед. Дар ҳар як бахш макети худеро созед, ки аз макети асосии сайт мерос гирад.