Dünaamilised ruudid NextJS-is

NextJS-is on võimalik luua dünaamilisi ruute. Sellised ruudid eeldavad, et osa URL-ist võib omada suvalist väärtust. Näiteks võtame adressi /users/1, kus ühe asemel võib olla suvaline number, tehniliselt vastavada kasutaja id-le, keda me soovime kuvada.

Sel juhul ei pea me looma mitut kausta iga võimaliku numbri jaoks. Piisab, kui kuulutame selle osa adressist dünaamiliseks. Sel juhul tegeleb kõikide selliste päringutega ühine fail page.jsx.

Selleks, et teha dünaamiline parameeter, tuleb vastava kausta nimi panna nurksulgudesse. Meie puhul on see järgmine kaustade struktuur:

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

Teeme vastava komponendi:

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

Samal ajal hoitakse meie poolt määratud parameetrit spetsiaalses objektis params. Kuvame selle parameetri väärtuse:

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

Tehke ruut, mis töötleb aadresse kujul /city/:name, kus :name asemel võib olla suvaline string.

Tehke ruut, mis töötleb aadresse kujul /show/:country/:city, kus :country ja :city asemel võivad olla suvalised stringid.

Tehke ruut, mis töötleb aadresse kujul /post/:id, kus :id asemel võib olla suvaline number.

Olgu antud järgmine massiiv:

let postitused = [
	'postitus1',
	'postitus2',
	'postitus3',
	'postitus4',
	'postitus5',
];

export default function Post() {
	
}

Tehke nii, et sõltuvalt parameetri id väärtusest kuvataks komponendi veebilehel vastav postitus.

Tehke ruut, mis töötleb aadresse kujul /prod/:id, kus :id asemel võib olla suvaline number.

Olgu antud järgmine massiiv:

let tooted = [
	{
		id: 1,
		nimi: 'toode1',
		maksumus: 100,
	},
	{
		id: 2,
		nimi: 'toode2',
		maksumus: 200,
	},
	{
		id: 3,
		nimi: 'toode3',
		maksumus: 300,
	},
];

export default function Prod() {
	
}

Tehke nii, et sõltuvalt parameetri id väärtusest kuvataks komponendi veebilehel vastav toode.