Динамичке руте у НекстЈС-у

У НекстЈС-у можете креирати динамичке руте. Такве руте подразумевају да део УРЛ-а може имати произвољну вредност. За пример узмимо адресу /users/1, у којој уместо јединице може бити било који број, технички одговарајући id-у корисника, ког желимо да прикажемо.

У овом случају не треба да креирамо множество фасцикли за сваки могући број. Довољно је прогласити тај део адресе динамичким. У овом случају све захтеве таквог вида ће обрађивати заједнички фајл page.jsx.

Да бисте направили динамички параметар, потребно је име одговарајуће фасцикле ставити у угаоне заграде. У нашем случају то ће бити следећа структура фасцикли:

/app//users//[id]/

Хајде да направимо одговарајућу компоненту:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    корисник
  </p>;
}

Притом задати параметар ће се чувати у специјалном објекту params. Хајде да прикажемо вредност овог параметра:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    корисник {params.id}
  </p>;
}

Задание 1

Направите руту која обрађује адресе вида /city/:name, где уместо :name може бити било који стринг.

Задание 2

Направите руту која обрађује адресе вида /show/:country/:city, где уместо :country и :city могу бити било који стрингови.

Задание 3

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

Нека је дат следећи низ:

page.jsxlet posts = [
  'пост1',
  'пост2',
  'пост3',
  'пост4',
  'пост5',
];

export default function Post() {
  
}

Направите тако да у зависности од вредности параметра id у верстању компоненте буде приказан одговарајући пост.

Задание 4

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

Нека је дат следећи низ:

page.jsxlet prods = [
  {
    id: 1,
    name: 'прод1',
    cost: 100,
  },
  {
    id: 2,
    name: 'прод2',
    cost: 200,
  },
  {
    id: 3,
    name: 'прод3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Направите тако да у зависности од вредности параметра id у верстању компоненте буде приказан одговарајући производ.