NextJS-те ішкі макеттер

Өздеріңіз білетіндей, /app бумасындағы layout.jsx файлында сайттың негізгі макеты орналасады.

Қажет болған жағдайда, ішкі бумаларда өз макеттеріңізді жасауға болады. Бұл жағдайда беттің мазмұны алдымен ішкі макетке салынады, содан кейін шыққан нәтиже негізгі макетке салынады.

Тәжірибеде көрейік. Біздің негізгі макетimiz келесідей болсын:

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>

Сайтта пайдаланушылар бөлімі мен посттар бөлімін жасаңыз. Әр бөлімде сайттың негізгі макетін мұра ететін өз макетін жасаңыз.