The Segment Array in Dynamic Routing in NextJS

If necessary, you can get an array of all segments into one variable. To do this, the parameter is placed in square brackets, and an ellipsis is placed before the parameter name. Let's look at an example.

Suppose we have a route of the following form: /prod/:category/:name/:id/, where the parameters marked with a colon are dynamic. Let's get an array of the values of these parameters into some variable. The name of this variable can be any. For example, let's call it slugs.

Let's create the following file structure:

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

Let's create the corresponding component:

export default function Prod({ params }) {
	console.log(params); // array of values
}

Create a route that handles addresses of the form /prod/:category/:name.

Given the following array:

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,
	},
];

Make sure that depending on the parameter values, the corresponding product is displayed in the component's markup.