Dinaminiai maršrutai NextJS

NextJS galima kurti dinaminius maršrutus. Tokie maršrutai numato, kad URL dalis gali turėti savavališką reikšmę. Pavyzdžiui, paimkime adresą /users/1, kuriame vietoj vieneto gali būti bet koks skaičius, techniškai atitinkantis vartotojo id, kurį norime parodyti.

Šiuo atveju mums nereikia kurti daugybės aplankų kiekvienam galimam skaičiui. Pakanka paskelbti šią adreso dalinį dinamine. Tokiu atveju visus tokio pobūdžio užklausas apdoros bendras failas page.jsx.

Norint padaryti dinaminį parametrą, atitinkamo aplanko pavadinimą reikia paimti į laužtinius skliaustus. Mūsų atveju tai bus tokia aplankų struktūra:

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

Sukurkime atitinkamą komponentą:

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

Tuomet mūsų nustatytas parametras bus saugomas specialiame objekte params. Parodykime šio parametro reikšmę:

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

Sukurkite maršrutą, apdorojantį adresus pavidalo /city/:name, kur vietoj :name gali būti bet kuri eilutė.

Sukurkite maršrutą, apdorojantį adresus pavidalo /show/:country/:city, kur vietoj :country ir :city gali būti bet kurios eilutės.

Sukurkite maršrutą, apdorojantį adresus pavidalo /post/:id, kur vietoj :id gali būti bet koks skaičius.

Tegu pateikiamas toks masyvas:

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

export default function Post() {
	
}

Padarykite taip, kad, priklausomai nuo parametro id reikšmės, komponento išdėstyme būtų rodomas atitinkamas įrašas.

Sukurkite maršrutą, apdorojantį adresus pavidalo /prod/:id, kur vietoj :id gali būti bet koks skaičius.

Tegu pateikiamas toks masyvas:

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

export default function Prod() {
	
}

Padarykite taip, kad, priklausomai nuo parametro id reikšmės, komponento išdėstyme būtų rodomas atitinkamas produktas.