Dynamické routy v NextJS

V NextJS lze vytvářet dynamické routy. Takové routy předpokládají, že část URL může mít libovolnou hodnotu. Jako příklad vezměme adresu /users/1, ve které místo jedničky může být libovolné číslo, technicky odpovídající id uživatele, kterého chceme zobrazit.

V tomto případě nemusíme vytvářet mnoho složek pro každé možné číslo. Stačí deklarovat tuto část adresy jako dynamickou. V tomto případě bude všechny požadavky tohoto druhu zpracovávat společný soubor page.jsx.

Abyste vytvořili dynamický parametr, je třeba název příslušné složky uvést do hranatých závorek. V našem případě to bude následující struktura složek:

/app//users//[id]/

Pojďme vytvořit odpovídající komponentu:

app/users/[id]/page.jsxexport default function User() {
  return <p>
    user
  </p>;
}

Přičemž zadaný parametr bude uložen ve speciálním objektu params. Pojďme zobrazit hodnotu tohoto parametru:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    user {params.id}
  </p>;
}

Задание 1

Vytvořte routu, která zpracovává adresy druhu /city/:name, kde místo :name může být libovolný řetězec.

Задание 2

Vytvořte routu, která zpracovává adresy druhu /show/:country/:city, kde místo :country a :city mohou být libovolné řetězce.

Задание 3

Vytvořte routu, která zpracovává adresy druhu /post/:id, kde místo :id může být libovolné číslo.

Nechť je dán následující pole:

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

export default function Post() {
  
}

Zařiďte, aby v závislosti na hodnotě parametru id ve versti komponenty byl zobrazen odpovídající příspěvek.

Задание 4

Vytvořte routu, která zpracovává adresy druhu /prod/:id, kde místo :id může být libovolné číslo.

Nechť je dán následující pole:

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() {
  
}

Zařiďte, aby v závislosti na hodnotě parametru id ve versti komponenty byl zobrazen odpovídající produkt.