Rute dinamice în NextJS

În NextJS se pot crea rute dinamice. Astfel de rute presupun că o parte a URL-ului poate avea o valoare arbitrară. De exemplu, să luăm adresa /users/1, în care în loc de unu poate fi orice număr, corespunzând tehnic id-ului utilizatorului pe care dorim să îl afișăm.

În acest caz, nu este nevoie să creăm o mulțime de directoare pentru fiecare număr posibil. Este suficient să declarăm această parte a adresei ca fiind dinamică. În acest caz, toate cererile de acest tip vor fi prelucrate de un fișier comun page.jsx.

Pentru a face un parametru dinamic, numele directorului corespunzător trebuie pus între paranteze pătrate. În cazul nostru, va fi următoarea structură de directoare:

/app//users//[id]/

Să facem componenta corespunzătoare:

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

Parametrul pe care l-am setat va fi stocat într-un obiect special params. Să afișăm valoarea acestui parametru:

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

Задание 1

Realizați o rută care procesează adrese de tipul /city/:name, unde în loc de :name poate fi orice șir de caractere.

Задание 2

Realizați o rută care procesează adrese de tipul /show/:country/:city, unde în loc de :country și :city pot fi orice șiruri de caractere.

Задание 3

Realizați o rută care procesează adrese de tipul /post/:id, unde în loc de :id poate fi orice număr.

Să fie dat următorul array:

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

export default function Post() {
  
}

Faceți ca, în funcție de valoarea parametrului id, în marcajul componentei să fie afișat postarea corespunzătoare.

Задание 4

Realizați o rută care procesează adrese de tipul /prod/:id, unde în loc de :id poate fi orice număr.

Să fie dat următorul 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() {
  
}

Faceți ca, în funcție de valoarea parametrului id, în marcajul componentei să fie afișat produsul corespunzător.