NextJS'te İç İçe Yerleşimler

Bildiğiniz gibi, /app klasöründe /layout.jsx dosyasında sitenin ana yerleşimi bulunur.

Ancak istenirse, iç içe klasörlerde kendi yerleşimleriniz oluşturulabilir. Bu durumda, sayfa içeriği önce iç içe yerleşime yerleştirilecek, ardından ortaya çıkan sonuç ana yerleşime yerleştirilecektir.

Pratikte deneyelim. Ana yerleşimimizin aşağıdaki gibi olduğunu varsayalım:

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

/users klasöründeki tüm içerikler için bir tane daha iç içe yerleşim yapalım:

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

Gördüğünüz gibi, bu yerleşimde sayfanın temel etiketlerini belirtmiyoruz, çünkü bunlar zaten sitemizin ana yerleşiminde mevcut.

Ayrıca, gösterilecek kullanıcı için bir içerik dosyası yapalım:

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

Bu işlemlerden sonra dosya yapımız şu şekilde görünecek:

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

Şimdi, ilgili URL'ye gidildiğinde, NextJS her şeyi bir araya getirecek ve tarayıcıda aşağıdaki nihai HTML kodunu elde edeceğiz:

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

Sitede kullanıcılar için bir bölüm ve gönderiler için bir bölüm yapın. Her bölümde, sitenin ana yerleşiminden miras alacak kendi yerleşimini yapın.