NextJS'te Paralel Yönlendirme

NextJS'te, sitenin bir bölümünün istenen URL'ye bağlı olarak farklı içerik göstermesi sağlanabilir. Buna paralel yönlendirme denir.

Bir örnek üzerinden inceleyelim. Sitemizin aşağıdaki düzene sahip 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>
	);
}

Diyelim ki başlıkta (header) dinamik bilgilerin gösterilmesini istiyoruz. /users URL'sinde kullanıcıların, /posts URL'sinde ise gönderilerin gösterildiği bir bileşen olsun.

Bu tür bir paralel yönlendirme için adı @ sembolü ile başlayan özel bir klasör oluşturulmalıdır. Örnek olarak klasörümüze @info adını verelim.

Bu klasörün içine iki bileşen yerleştireceğiz. Birincisi /users/ klasöründe kullanıcıları göstermek için, ikincisi ise /posts/ klasöründe gönderileri göstermek için. Dosya yapımız aşağıdaki gibi olacaktır:

/app/
- /@info/
  - /users/
    - page.jsx
  - /posts/
    - page.jsx

Şimdi sitemizin düzeninde (layout) özel bir ekleme komutu yazmamız gerekiyor. Bunun için özel bir dinamik slot kullanılmalıdır.

Bunun ne olduğunu anlamak için öncelikle sitemizin düzen fonksiyonunun parametresine bakalım:

export default function RootLayout({children}) {
	return (
		
	);
}

Parametre olarak bir nesnenin iletildiğine ve bu nesneden sitenin içeriğini children değişkenine çıkardığımıza dikkat edin.

Bu nesnede başka anahtarlar da bulunabilir. Bunlar, adı @ ile başlayan klasörlere karşılık gelir.

Bizim durumumuzda @info klasörümüz var, bu da info değişkenine erişebileceğimiz anlamına gelir. Bu değişken, URL'ye bağlı olarak bileşenlerden birinin (kullanıcılar veya gönderiler) içeriğini taşır. Bu değişkeni alalım:

export default function RootLayout({children, info}) {
	return (
		
	);
}

Şimdi düzenin içinde info değişkenini gösterebiliriz. URL'ye bağlı olarak buraya bileşenlerimizden birinin içeriği eklenecektir:

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

Sağ kenar çubuğu için dinamik bir slot oluşturun.

Sol kenar çubuğu için dinamik bir slot oluşturun.