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 барчасини бирлаштириб, браузерда биз куйидаги yakuniy 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>

Веб-сайтингизда фойдаланувчилар бўлими ва постлар бўлимини ясаинг. Ҳар бир бўлимда веб-сайтининг асосий макетидан мерос оладиган ўз макетини ясаинг.