Динамические роуты в 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 в верстке компонента выводился соответствующий продукт.