Динамички рути во 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 може да биде кој било број.

Нека е даден следниот array:

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

export default function Post() {
	
}

Направете така што во зависност од вредноста на параметарот id во верстката на компонентата да се прикажува соодветниот пост.

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

Нека е даден следниот array:

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 во верстката на компонентата да се прикажува соодветниот продукт.