Dynamické routy v NextJS

V NextJS je možné vytvárať dynamické routy. Takéto routy predpokladajú, že časť URL môže mať ľubovoľnú hodnotu. Ako príklad si vezmime adresu /users/1, v ktorej namiesto jednotky môže byť ľubovoľné číslo, technicky zodpovedajúce id používateľa, ktorého chceme zobraziť.

V tomto prípade nemusíme vytvárať veľa priečinkov pre každé možné číslo. Stačí deklarovať túto časť adresy ako dynamickú. V takom prípade všetky požiadavky tohto typu bude spracovávať spoločný súbor page.jsx.

Aby sme vytvorili dynamický parameter, názov príslušného priečinka treba uzavrieť do hranatých zátvoriek. V našom prípade to bude nasledujúca štruktúra priečinkov:

/app//users//[id]/

Vytvorme zodpovedajúci komponent:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    používateľ
  </p>;
}

Zadaný parameter bude uložený v špeciálnom objekte params. Vypíšme hodnotu tohto parametra:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    používateľ {params.id}
  </p>;
}

Задание 1

Vytvorte routu, ktorá spracováva adresy tvaru /city/:name, kde namiesto :name môže byť ľubovoľný reťazec.

Задание 2

Vytvorte routu, ktorá spracováva adresy tvaru /show/:country/:city, kde namiesto :country a :city môžu byť ľubovoľné reťazce.

Задание 3

Vytvorte routu, ktorá spracováva adresy tvaru /post/:id, kde namiesto :id môže byť ľubovoľné číslo.

Nech je dané nasledujúce pole:

page.jsxlet posts = [
  'príspevok1',
  'príspevok2',
  'príspevok3',
  'príspevok4',
  'príspevok5',
];

export default function Post() {
  
}

Zabezpečte, aby v závislosti od hodnoty parametra id sa vo verzbe komponentu zobrazil zodpovedajúci príspevok.

Задание 4

Vytvorte routu, ktorá spracováva adresy tvaru /prod/:id, kde namiesto :id môže byť ľubovoľné číslo.

Nech je dané nasledujúce pole:

page.jsxlet prods = [
  {
    id: 1,
    name: 'produkt1',
    cost: 100,
  },
  {
    id: 2,
    name: 'produkt2',
    cost: 200,
  },
  {
    id: 3,
    name: 'produkt3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Zabezpečte, aby v závislosti od hodnoty parametra id sa vo verzbe komponentu zobrazil zodpovedajúci produkt.