Dynamiske ruter i NextJS

I NextJS kan man opprette dynamiske ruter. Slike ruter forutsetter at en del av URL-en kan ha en vilkårlig verdi. La oss ta adressen /users/1 som et eksempel, der enheten kan erstattes med et hvilket som helst tall, som teknisk sett tilsvarer id-en til brukeren vi ønsker å vise.

I dette tilfellet trenger vi ikke å opprette flere mapper for hvert mulige tall. Det er nok å erklære denne delen av adressen som dynamisk. I så fall vil alle forespørsler av denne typen blitt håndtert av en felles fil page.jsx.

For å lage en dynamisk parameter, må navnet på den tilsvarende mappen plasseres i klammeparenteser. I vårt tilfelle vil dette være følgende mappestruktur:

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

La oss lage den tilsvarende komponenten:

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

Parameteren som er satt vil lagres i et spesialobjekt params. La oss vise verdien til denne parameteren:

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

Lag en rute som håndterer adresser på formen /city/:name, der :name kan erstattes med en hvilken som helst streng.

Lag en rute som håndterer adresser på formen /show/:country/:city, der :country og :city kan erstattes med hvilke som helst strenger.

Lag en rute som håndterer adresser på formen /post/:id, der :id kan erstattes med et hvilket som helst tall.

La følgende array være gitt:

let innlegg = [
	'innlegg1',
	'innlegg2',
	'innlegg3',
	'innlegg4',
	'innlegg5',
];

export default function Post() {
	
}

Gjør slik at, avhengig av verdien til parameteren id, blir det tilsvarende innlegget vist i komponentens oppbygning.

Lag en rute som håndterer adresser på formen /prod/:id, der :id kan erstattes med et hvilket som helst tall.

La følgende array være gitt:

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

export default function Prod() {
	
}

Gjør slik at, avhengig av verdien til parameteren id, blir det tilsvarende produktet vist i komponentens oppbygning.