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