Дынамічныя маршруты ў NextJS

У NextJS можна ствараць дынамічныя маршруты. Такія маршруты прадугледжваюць, што частка URL можа мець адвольнае значэнне. Для прыкладу возьмем адрас /users/1, у якім замест адзінкі можа быць любы лік, тэхнічна адпаведны id юзера, якога мы хочам вывесці.

У гэтым выпадку нам не трэба ствараць мноства папак для кожнага магчымага ліку. Дастаткова аб'явіць гэтую частку адрасу дынамічнай. У гэтым выпадку ўсе запыты такога выгляду будзе апрацоўваць агульны файл page.jsx.

Для таго, каб зрабіць дынамічны параметр, трэба імя адпаведнай папкі ўзяць у квадратныя дужкі. У нашым выпадку гэта будзе наступная структура папак:

/app//users//[id]/

Давайце зробім адпаведны кампанент:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    user
  </p>;
}

Пры гэтым зададзены намі параметр будзе захоўвацца ў спецыяльным аб'екце params. Давайце выведзем значэнне гэтага параметра:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {params.id}
  </p>;
}

Задание 1

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

Задание 2

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

Задание 3

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

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

page.jsxlet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

export default function Post() {
  
}

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

Задание 4

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

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

page.jsxlet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];

export default function Prod() {
  
}

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