Дынамічныя маршруты ў 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 можа быць любы лік.

Хай будзе дадзены наступны масіў:

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

export default function Post() {
	
}

Зрабіце так, каб у залежнасці ад значэння параметра id у вёрстцы кампанента вывадзіўся адпаведны пост.

Зрабіце маршрут, які апрацоўвае адрасы выгляду /prod/:id, дзе замест :id можа быць любы лік.

Хай будзе дадзены наступны масіў:

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 у вёрстцы кампанента вывадзіўся адпаведны прадукт.