Dinamičke rute u NextJS

U NextJS-u je moguće kreirati dinamičke rute. Takve rute podrazumevaju da deo URL-a može imati proizvoljnu vrednost. Na primer, uzmimo adresu /users/1, u kojoj umesto jedinice može biti bilo koji broj, tehnički odgovarajući id-u korisnika koji želimo da prikažemo.

U ovom slučaju nam nije potrebno da kreiramo mnoštvo foldera za svaki mogući broj. Dovoljno je da deklarativno proglasimo taj deo adrese dinamičkim. Tada će sve zahteve ovog tipa da obrađuje zajednički fajl page.jsx.

Da bismo napravili dinamički parametar, potrebno je da ime odgovarajućeg foldera stavimo u uglaste zagrade. U našem slučaju to će biti sledeća struktura foldera:

/app//users//[id]/

Hajde da napravimo odgovarajuću komponentu:

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

Parametar koji smo postavili će se čuvati u specijalnom objektu params. Hajde da prikažemo vrednost ovog parametra:

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

Задание 1

Napravite rutu koja obrađuje adrese tipa /city/:name, gde umesto :name može biti bilo koji string.

Задание 2

Napravite rutu koja obrađuje adrese tipa /show/:country/:city, gde umesto :country i :city mogu biti bilo koji stringovi.

Задание 3

Napravite rutu koja obrađuje adrese tipa /post/:id, gde umesto :id može biti bilo koji broj.

Neka je dat sledeći niz:

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

export default function Post() {
  
}

Uredite tako da u zavisnosti od vrednosti parametra id u izgledu komponente bude prikazan odgovarajući post.

Задание 4

Napravite rutu koja obrađuje adrese tipa /prod/:id, gde umesto :id može biti bilo koji broj.

Neka je dat sledeći niz:

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

Uredite tako da u zavisnosti od vrednosti parametra id u izgledu komponente bude prikazan odgovarajući proizvod.