Динамичке руте у НекстЈС-у

У НекстЈС-у можете креирати динамичке руте. Такве руте подразумевају да део УРЛ-а може имати произвољну вредност. За пример узмимо адресу /users/1, у којој уместо јединице може бити било који број, технички одговарајући id-у корисника, ког желимо да прикажемо.

У овом случају не треба да креирамо множество фасцикли за сваки могући број. Довољно је прогласити тај део адресе динамичким. У овом случају све захтеве таквог вида ће обрађивати заједнички фајл page.jsx.

Да бисте направили динамички параметар, потребно је име одговарајуће фасцикле ставити у угаоне заграде. У нашем случају то ће бити следећа структура фасцикли:

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

Хајде да направимо одговарајућу компоненту:

export default function User() {
	return <p>
		корисник
	</p>;
}

Притом задати параметар ће се чувати у специјалном објекту params. Хајде да прикажемо вредност овог параметра:

export default function User({ params }) {
	return <p>
		корисник {params.id}
	</p>;
}

Направите руту која обрађује адресе вида /city/:name, где уместо :name може бити било који стринг.

Направите руту која обрађује адресе вида /show/:country/:city, где уместо :country и :city могу бити било који стрингови.

Направите руту која обрађује адресе вида /post/:id, где уместо :id може бити било који број.

Нека је дат следећи низ:

let posts = [
	'пост1',
	'пост2',
	'пост3',
	'пост4',
	'пост5',
];

export default function Post() {
	
}

Направите тако да у зависности од вредности параметра id у верстању компоненте буде приказан одговарајући пост.

Направите руту која обрађује адресе вида /prod/:id, где уместо :id може бити било који број.

Нека је дат следећи низ:

let prods = [
	{
		id: 1,
		name: 'прод1',
		cost: 100,
	},
	{
		id: 2,
		name: 'прод2',
		cost: 200,
	},
	{
		id: 3,
		name: 'прод3',
		cost: 300,
	},
];

export default function Prod() {
	
}

Направите тако да у зависности од вредности параметра id у верстању компоненте буде приказан одговарајући производ.