Dynamiczne trasy w NextJS

W NextJS można tworzyć dynamiczne trasy. Takie trasy zakładają, że część URL może mieć dowolną wartość. Dla przykładu weźmy adres /users/1, w którym zamiast jedynki może być dowolna liczba, technicznie odpowiadająca id użytkownika, którego chcemy wyświetlić.

W tym przypadku nie musimy tworzyć wielu folderów dla każdej możliwej liczby. Wystarczy zadeklarować tę część adresu jako dynamiczną. W tym przypadku wszystkie żądania tego rodzaju będą obsługiwane przez wspólny plik page.jsx.

Aby utworzyć dynamiczny parametr, należy nazwę odpowiedniego folderu umieścić w nawiasach kwadratowych. W naszym przypadku będzie to następująca struktura folderów:

/app//users//[id]/

Stwórzmy odpowiedni komponent:

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

Przy tym zadany przez nas parametr będzie przechowywany w specjalnym obiekcie params. Wyświetlmy wartość tego parametru:

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

Задание 1

Utwórz trasę, obsługującą adresy rodzaju /city/:name, gdzie zamiast :name może być dowolny ciąg znaków.

Задание 2

Utwórz trasę, obsługującą adresy rodzaju /show/:country/:city, gdzie zamiast :country i :city mogą być dowolne ciągi znaków.

Задание 3

Utwórz trasę, obsługującą adresy rodzaju /post/:id, gdzie zamiast :id może być dowolna liczba.

Niech będzie dana następująca tablica:

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

export default function Post() {
  
}

Spraw, aby w zależności od wartości parametru id w strukturze komponentu był wyświetlany odpowiedni post.

Задание 4

Utwórz trasę, obsługującą adresy rodzaju /prod/:id, gdzie zamiast :id może być dowolna liczba.

Niech będzie dana następująca tablica:

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

Spraw, aby w zależności od wartości parametru id w strukturze komponentu był wyświetlany odpowiedni produkt.