NextJSтегин динамикалык маршрутундагы сегменттер массиви

Керек болсо, бардык сегменттердин массивин бир өзгөрмөгө алууга болот. Бул үчүн параметр чарчы кашаага алынат, ал эми параметрдин атынын алдына үч чекит коюлат. Келгиле, мисал аркылуу карап көрөлү.

Андай маршрут бар деп коёлу: /prod/:category/:name/:id/, мында эки чекит менен белгиленген параметрлер динамикалык болуп саналат. Келгиле, бул параметрлердин маанилеринин массивин кандайдыр бир өзгөрмөгө алалы. Бул өзгөрмөнүн аты каалагандай болушу мүмкүн. Мисалы, аны slugs деп атайлы.

Төмөнкү файлдык структураны түзөлү:

/app/
- /prod/
  - /[...slugs]/

Тиешелүү компонентти түзөлү:

export default function Prod({ params }) {
	console.log(params); // маанилер массиви
}

/prod/:category/:name түрүндөгү даректерди иштетүүчү маршрутту түзөңүз.

Төмөнкү массив берилди деп коёлу:

let prods = [
	{
		category: 'catg1',
		name: 'prod1',
		cost: 100,
	},
	{
		category: 'catg1',
		name: 'prod2',
		cost: 200,
	},
	{
		category: 'catg2',
		name: 'prod1',
		cost: 300,
	},
	{
		category: 'catg2',
		name: 'prod3',
		cost: 400,
	},
];

Параметрлердин маанисине жараша компоненттин версткасында тиешелүү продукт чыгарылышы үчүн керектүү иштерди жасаңыз.