NextJS-də Paralel Routing

NextJS-də elə etmək olar ki, saytın bir hissəsi sorğu edilən URL-dən asılı olaraq müxtəlif məzmun göstərsin. Buna paralel routing deyilir.

Gəlin bir nümunəyə baxaq. Tutaq ki, saytımızın aşağıdakı layout-u var:

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

Tutaq ki, biz istəyirik ki, header-də dinamik məlumat göstərilsin. Tutaq ki, /users URL-də istifadəçilər komponenti, /posts URL-də isə yazılar komponenti göstərilsin.

Belə paralel routing üçün xüsusi bir qovluq etmək lazımdır, onun adı @ simvolu ilə başlamalıdır. Nümunə üçün qovluğumuzu @info adlandıraq.

Bu qovluqda iki komponent yerləşdirək. Birincisi /users/ qovluğunda istifadəçiləri göstərmək üçün, ikincisi isə /posts/ qovluğunda yazıları göstərmək üçün. Fayl quruluşumuz aşağıdakı kimi olacaq:

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

İndi bizə sayt layout-undə xüsusi əlavə etmə əmri yazmaq lazımdır. Bunun üçün xüsusi dinamik slot istifadə etmək lazımdır.

Bunun nə olduğunu başa düşmək üçün əvvəlcə sayt layout-unumuzun funksiyasının parametrinə baxın:

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

Diqqət edin ki, parametr kimi bizə bir obyekt ötürülür, ondan biz saytın məzmununu children dəyişəninə çıxarırıq.

Bu obyektdə başqa açar sözlər də ola bilər. Onlar adı @ ilə başlayan qovluqlara uyğun gəlir.

Bizim halda @info qovluğumuz var, bu o deməkdir ki, bizə info dəyişəni əlçatan olacaq, URL-dən asılı olaraq komponentlərdən birinin mətni - istifadəçilər və ya yazılar orada olacaq. Gəlin bu dəyişəni əldə edək:

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

İndi layout-un daxilində biz info dəyişənini göstərə bilərik. URL-dən asılı olaraq bu yerə komponentlərimizdən birinin mətni daxil ediləcək:

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ğ sidebar üçün dinamik slot edin.

Sol sidebar üçün dinamik slot edin.