Динамички рути во 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 може да биде кој било број.

Нека е даден следниот array:

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

export default function Post() {
  
}

Направете така што во зависност од вредноста на параметарот id во верстката на компонентата да се прикажува соодветниот пост.

Задание 4

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

Нека е даден следниот array:

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