Dynamické routy v NextJS

V NextJS je možné vytvárať dynamické routy. Takéto routy predpokladajú, že časť URL môže mať ľubovoľnú hodnotu. Ako príklad si vezmime adresu /users/1, v ktorej namiesto jednotky môže byť ľubovoľné číslo, technicky zodpovedajúce id používateľa, ktorého chceme zobraziť.

V tomto prípade nemusíme vytvárať veľa priečinkov pre každé možné číslo. Stačí deklarovať túto časť adresy ako dynamickú. V takom prípade všetky požiadavky tohto typu bude spracovávať spoločný súbor page.jsx.

Aby sme vytvorili dynamický parameter, názov príslušného priečinka treba uzavrieť do hranatých zátvoriek. V našom prípade to bude nasledujúca štruktúra priečinkov:

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

Vytvorme zodpovedajúci komponent:

export default function User() {
	return <p>
		používateľ
	</p>;
}

Zadaný parameter bude uložený v špeciálnom objekte params. Vypíšme hodnotu tohto parametra:

export default function User({ params }) {
	return <p>
		používateľ {params.id}
	</p>;
}

Vytvorte routu, ktorá spracováva adresy tvaru /city/:name, kde namiesto :name môže byť ľubovoľný reťazec.

Vytvorte routu, ktorá spracováva adresy tvaru /show/:country/:city, kde namiesto :country a :city môžu byť ľubovoľné reťazce.

Vytvorte routu, ktorá spracováva adresy tvaru /post/:id, kde namiesto :id môže byť ľubovoľné číslo.

Nech je dané nasledujúce pole:

let posts = [
	'príspevok1',
	'príspevok2',
	'príspevok3',
	'príspevok4',
	'príspevok5',
];

export default function Post() {
	
}

Zabezpečte, aby v závislosti od hodnoty parametra id sa vo verzbe komponentu zobrazil zodpovedajúci príspevok.

Vytvorte routu, ktorá spracováva adresy tvaru /prod/:id, kde namiesto :id môže byť ľubovoľné číslo.

Nech je dané nasledujúce pole:

let prods = [
	{
		id: 1,
		name: 'produkt1',
		cost: 100,
	},
	{
		id: 2,
		name: 'produkt2',
		cost: 200,
	},
	{
		id: 3,
		name: 'produkt3',
		cost: 300,
	},
];

export default function Prod() {
	
}

Zabezpečte, aby v závislosti od hodnoty parametra id sa vo verzbe komponentu zobrazil zodpovedajúci produkt.