NextJS da Dinamik Routlar

NextJS da dinamik routlar yaratish mumkin. Bunday routlar URL ning bir qismi ixtiyoriy qiymatga ega bo'lishi mumkinligini nazarda tutadi. Misol uchun, /users/1 manzilini olaylik, unda birlik o'rnida istalgan raqam bo'lishi mumkin, texnik jihatdan chiqarmoqchi bo'lgan foydalanuvchimizning id siga mos keladi.

Bunday holda, har bir mumkin bo'lgan raqam uchun ko'plab papkalar yaratish shart emas. Bu manzil qismini dinamik e'lon qilish kifoya. Bunday holatda shu ko'rinishdagi barcha so'rovlarni umumiy page.jsx fayli qayta ishlaydi.

Dinamik parametr yaratish uchun, mos keladigan papka nomini to'rtburchak qavs ichiga olish kerak. Bizning holatda bu quyidagi papka tuzilishi bo'ladi:

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

Keling, mos keladigan komponentni yaratamiz:

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

Bunda biz belgilagan parametr maxsus params obyektida saqlanadi. Keling, ushbu parametrning qiymatini chiqaramiz:

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

/city/:name ko'rinishidagi manzillarni qayta ishlaydigan rout yarating, bunda :name o'rnida istalgan satr bo'lishi mumkin.

/show/:country/:city ko'rinishidagi manzillarni qayta ishlaydigan rout yarating, bunda :country va :city o'rnida istalgan satrlar bo'lishi mumkin.

/post/:id ko'rinishidagi manzillarni qayta ishlaydigan rout yarating, bunda :id o'rnida istalgan raqam bo'lishi mumkin.

Quyidagi massiv berilgan:

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

export default function Post() {
	
}

id parametrining qiymatiga qarab komponent dizaynida mos keladigan post chiqarilishi uchun sozlang.

/prod/:id ko'rinishidagi manzillarni qayta ishlaydigan rout yarating, bunda :id o'rnida istalgan raqam bo'lishi mumkin.

Quyidagi massiv berilgan:

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 parametrining qiymatiga qarab komponent dizaynida mos keladigan mahsulot chiqarilishi uchun sozlang.