დინამიური რაუთები NextJS-ში

NextJS-ში შესაძლებელია დინამიური რაუთების შექმნა. ასეთი რაუთები ითვალისწინებს, რომ URL-ის ნაწილს შეიძლება ჰქონდეს თვითნებური მნიშვნელობა. მაგალითისთვის ავიღოთ მისამართი /users/1, რომელშიც ერთეულის ნაცვლად შეიძლება იყოს ნებისმიერი რიცხვი, ტექნიკურად შესაბამისი მომხმარებლის id-ის, რომლის გამოტანაც გვსურს.

ამ შემთხვევაში ჩვენ არ გვჭირდება მრავალი საქაღალდის შექმნა თითოეული შესაძლო რიცხვისთვის. საკმარისია ამ მისამართის ნაწილის დინამიურად გამოცხადება. ამ შემთხვევაში ამ ფორმის ყველა მოთხოვნას მოახდენს გადაუდებელი ფაილი page.jsx.

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

/app/
- /users/
  - /[id]/

მოდით შევქმნათ შესაბამისი კომპონენტი:

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

ამ შემთხვევაში ჩვენს მიერ მითითებული პარამეტრი შეინახება სპეციალურ ობიექტში params. მოდით გამოვიტანოთ ამ პარამეტრის მნიშვნელობა:

export default function User({ params }) {
	return <p>
		user {params.id}
	</p>;
}

შექმენით რაუთი, რომელიც ამუშავებს მისამართებს ფორმის /city/:name, სადაც :name-ის ნაცვლად შეიძლება იყოს ნებისმიერი სტრიქონი.

შექმენით რაუთი, რომელიც ამუშავებს მისამართებს ფორმის /show/:country/:city, სადაც :country-ის და :city-ის ნაცვლად შეიძლება იყოს ნებისმიერი სტრიქონი.

შექმენით რაუთი, რომელიც ამუშავებს მისამართებს ფორმის /post/:id, სადაც :id-ის ნაცვლად შეიძლება იყოს ნებისმიერი რიცხვი.

მოდით იყოს მოცემული შემდეგი მასივი:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

გახადეთ ისე, რომ პარამეტრის id მნიშვნელობიდან გამომდინარე კომპონენტის ვერსტკაში გამოჩნდეს შესაბამისი პოსტი.

შექმენით რაუთი, რომელიც ამუშავებს მისამართებს ფორმის /prod/:id, სადაც :id-ის ნაცვლად შეიძლება იყოს ნებისმიერი რიცხვი.

მოდით იყოს მოცემული შემდეგი მასივი:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

export default function Prod() {
	
}

გახადეთ ისე, რომ პარამეტრის id მნიშვნელობიდან გამომდინარე კომპონენტის ვერსტკაში გამოჩნდეს შესაბამისი პროდუქტი.