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:

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

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

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

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.

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:

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

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:

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