პარალელური როუტინგი NextJS-ში

NextJS-ში შესაძლებელია ისეთი რამის გაკეთება, რომ საიტის ნაწილი აჩვენებდეს სხვადასხვა შიგთავსს მოთხოვნილი URL-ის მიხედვით. ამას ეწოდება პარალელური როუტინგი.

მოდით შევხედოთ მაგალითს. დავუშვათ, გვაქვს შემდეგი საიტის ლეაუტი:

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

დავუშვათ, გვსურს, რომ ჰედერში გამოჩნდეს დინამიური ინფორმაცია. URL /users-მ უნდა გამოიტანოს კომპონენტი მომხმარებლებით, ხოლო URL /posts კომპონენტი პოსტებით.

ასეთი პარალელური როუტინგისთვის საჭიროა განსაკუთრებული ფოლდერის გაკეთება, რომლის სახელიც დაიწყება სიმბოლოთი @. მაგალითისთვის დავარქვათ ჩვენს ფოლდერს @info.

ამ ფოლდერში მოვათავსოთ ორი კომპონენტი. პირველი მომხმარებლების საჩვენებლად ფოლდერში /users/, ხოლო მეორე პოსტების საჩვენებლად ფოლდერში /posts/. ჩვენ მივიღებთ შემდეგ ფაილურ სტრუქტურას:

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

ახლა ჩვენ გვჭირდება საიტის ლეაუტში დავწეროთ განსაკუთრებული ბრძანება ჩასაშენებლად. ამისთვის საჭიროა გამოვიყენოთ განსაკუთრებული დინამიური სლოტი.

რომ გაიგოთ, რა არის ეს, ჯერ შეხედეთ ჩვენი საიტის ლეაუტის ფუნქციის პარამეტრს:

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

გაითვალისწინეთ, რომ პარამეტრად ჩვენთან გადაეცემა ობიექტი, საიდანაც ჩვენ ვიღებთ საიტის კონტენტს ცვლადში children.

ამ ობიექტში შეიძლება იყოს სხვა გასაღებებიც. ისინი შეესაბამება იმ ფოლდერებს, რომელთა სახელიც ჩვენ დავიწყეთ @-ით.

ჩვენს შემთხვევაში გვაქვს ფოლდერი @info, რაც ნიშნავს, რომ ჩვენ გვექნება ხელმისაწვდომი ცვლადი info, რომელიც URL-ის მიხედვით შეიცავს ერთ-ერთი კომპონენტის ტექსტს - მომხმარებლების ან პოსტების. მოდით მივიღოთ ეს ცვლადი:

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

ახლა ლეაუტის ვერსტკის შიგნით ჩვენ შეგვიძლია გამოვსახოთ ცვლადი info. ამ ადგილას URL-ის მიხედვით ჩაისვამა ჩვენი ერთ-ერთი კომპონენტის ტექსტი:

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

გაუკეთეთ დინამიური სლოტი მარჯვენა საიდბარისთვის.

გაუკეთეთ დინამიური სლოტი მარცხენა საიდბარისთვის.