Dinamične poti v NextJS

V NextJS lahko ustvarite dinamične poti. Takšne poti predpostavljajo, da lahko del URL-ja ima poljubno vrednost. Za primer vzemimo naslov /users/1, kjer namesto enice je lahko poljubno število, ki tehnično ustreza id-ju uporabnika, ki ga želimo prikazati.

V tem primeru nam ni treba ustvariti več map za vsako možno število. Dovolj je, da ta del naslova razglasimo za dinamičnega. V tem primeru bo vse zahteve te vrste obdelala skupna datoteka page.jsx.

Če želite narediti dinamičen parameter, morate ime ustrezne mape vzeti v oglate oklepaje. V našem primeru bo to naslednja struktura map:

/app//users//[id]/

Naredimo ustrezno komponento:

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

Parameter, ki smo ga nastavili, bo shranjen v posebnem objektu params. Izpišimo vrednost tega parametra:

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

Задание 1

Naredite pot, ki obdeluje naslove oblike /city/:name, kjer namesto :name je lahko kateri koli niz.

Задание 2

Naredite pot, ki obdeluje naslove oblike /show/:country/:city, kjer namesto :country in :city je lahko kateri koli niz.

Задание 3

Naredite pot, ki obdeluje naslove oblike /post/:id, kjer namesto :id je lahko katero koli število.

Naj bo podan naslednji seznam:

page.jsxlet posts = [
  'objava1',
  'objava2',
  'objava3',
  'objava4',
  'objava5',
];

export default function Post() {
  
}

Poskrbite, da bo glede na vrednost parametra id v prikazu komponente prikazana ustrezna objava.

Задание 4

Naredite pot, ki obdeluje naslove oblike /prod/:id, kjer namesto :id je lahko katero koli število.

Naj bo podan naslednji seznam:

page.jsxlet prods = [
  {
    id: 1,
    name: 'izdelek1',
    cost: 100,
  },
  {
    id: 2,
    name: 'izdelek2',
    cost: 200,
  },
  {
    id: 3,
    name: 'izdelek3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Poskrbite, da bo glede na vrednost parametra id v prikazu komponente prikazan ustrezen izdelek.