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:

export default function User() {
	return <p>
		uporabnik
	</p>;
}

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

export default function User({ params }) {
	return <p>
		uporabnik {params.id}
	</p>;
}

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

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

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

Naj bo podan naslednji seznam:

let posts = [
	'objava1',
	'objava2',
	'objava3',
	'objava4',
	'objava5',
];

export default function Post() {
	
}

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

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

Naj bo podan naslednji seznam:

let 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.