NextJS-de içki maketler

Bilşiňiz ýaly, /app papkasynyň layout.jsx faýlynda sahypanyň esasy maketi ýerleşir.

Islegiňize görä, şeýle-de, içki papkalarda öz maketleriňizi döredip bilersiňiz. Bu ýagdaýda sahypanyň mazmuny ilki bilen içki makete goşular, soňra bolsa alynan netije esasy makete goşular.

Geliň amalda synaýaly. Bizim esasy maketimiz aşakdaky görnüşe eýe bolsun:

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

Geliň ýene bir, /users papkasynyň ähli mazmunlary üçin içki maket döredeliň:

export default function UsersLayout({children}) {
	return (
		<>
			<div className="info">
				ähli ulanyjylar üçin habar
			</div>
			<div className="content">
				{children}
			</div>
		</>
	);
}

Görşüňiz ýaly, bu maketde biz sahypanyň esasy teglerini görkezmeýäris, sebäbi olar eýýäm sahypamyzyň esasy maketinde bar.

Geliň şeýle-de ulanyjy görkezmek üçin mazmun faýly döredeliň:

export default function User() {
	return <>
		<h1>Ulanyjy</h1>
		<p>
			ulanyjy beýany
		</p>
	</>;
}

Bu manipýulýasiýalardan soň bizim faýl gurluşymyz aşakdaky ýaly bolar:

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

Indi, degişli URL-e ýüzlenilse, NextJS hemmesini bilelikde ýygnalar we brauzerde biz aşakdaky jemi HTML kody alyarys:

<html lang="en">
	<body>
		<header>
			header
		</header>
		<main>
			<div class="info">
				ähli ulanyjylar üçin habar
			</div>
			
			<h1>Ulanyjy</h1>
			<p>
				ulanyjy beýany
			</p>
		</main>
		<footer>
			footer
		</footer>
	</body>
</html>

Sahypada ulanyjylar bölümini we postlar bölümini düzüň. Her bölümde sahypanyň esasy maketinden miras alýan öz maketiňizi düzüň.