Dinamikus útvonalak a NextJS-ben

A NextJS-ben lehetőség van dinamikus útvonalak létrehozására. Az ilyen útvonalak azt feltételezik, hogy az URL egy része tetszőleges értékű lehet. Példaként vegyük a /users/1 címet, ahol az egység helyett bármelyik szám lehet, amely technikailag annak a felhasználónak az azonosítójának felel meg, akit ki szeretnénk jeleníteni.

Ebben az esetben nem kell sok mappát létrehoznunk minden lehetséges számhoz. Elég ezt az útvonalrészt dinamikussá nyilvánítani. Ebben az esetben minden ilyen típusú kérést egy közös page.jsx fájl fog kezelni.

Ahhoz, hogy egy dinamikus paramétert készítsünk, a megfelelő mappa nevét szögletes zárójelek közé kell tenni. Esetünkben a következő mappaszerkezet lesz:

/app/
- /users/
  - /[id]/

Készítsük el a megfelelő komponenst:

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

Ebben az esetben a megadott paraméter egy speciális params objektumban lesz tárolva. Jelenítsük meg a paraméter értékét:

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

Készítsen egy útvonalat, amely a /city/:name formátumú címeket kezeli, ahol a :name helyett bármilyen sztring lehet.

Készítsen egy útvonalat, amely a /show/:country/:city formátumú címeket kezeli, ahol a :country és a :city helyett bármilyen sztringek lehetnek.

Készítsen egy útvonalat, amely a /post/:id formátumú címeket kezeli, ahol a :id helyett bármilyen szám lehet.

Legyen adott a következő tömb:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

Úgy állítsa be, hogy a id paraméter értékétől függően a komponens megjelenítésében a megfelelő bejegyzés jelenjen meg.

Készítsen egy útvonalat, amely a /prod/:id formátumú címeket kezeli, ahol a :id helyett bármilyen szám lehet.

Legyen adott a következő tömb:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

export default function Prod() {
	
}

Úgy állítsa be, hogy a id paraméter értékétől függően a komponens megjelenítésében a megfelelő termék jelenjen meg.