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:

export 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:

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

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

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

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

Neka je dat sledeći niz:

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

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

Neka je dat sledeći niz:

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