NextJS-də İç-içə Layoutlar

Bildiyiniz kimi, /app qovluğunda /layout.jsx faylında saytın əsas layoutu yerləşir.

Lakin, istəsəniz, daxili qovluqlarda öz layoutlarınızı yarada bilərsiniz. Bu halda səhifə məzmunu əvvəlcə daxili layouta daxil ediləcək, sonra isə alınan nəticə əsas layouta daxil ediləcək.

Gəlin praktikada sınayaq. Fərz edək ki, bizim əsas layoutumuz aşağıdakı görünüşə malikdir:

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

Gəlin /users qovluğundakı bütün məzmunlar üçün bir daxili layout daha edək:

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

Gördüyünüz kimi, bu layoutda biz əsas səhifə teqlərini göstərmirik, çünki onlar artıq saytımızın əsas layoutunda mövcuddur.

Gəlin həmçinin istifadəçini göstərmək üçün məzmun faylı da yaradaq:

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

Bu manipulyasiyalardan sonra bizim fayl quruluşumuz belə görünəcək:

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

İndi, müvafiq URL-ə müraciət etdikdə, NextJS hər şeyi birləşdirəcək və brauzerdə biz aşağıdakı HTML kodunu alacağıq:

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

Saytda istifadəçilər bölməsi və yazılar bölməsi edin. Hər bir bölmədə öz layoutunu yaradın, hansı ki, saytın əsas layoutundan miras alır.