Dynamische Routes in NextJS

In NextJS kun je dynamische routes aanmaken. Dergelijke routes veronderstellen dat een deel van de URL een willekeurige waarde kan hebben. Laten we als voorbeeld het adres /users/1 nemen, waarin in plaats van één elk getal kan staan, dat technisch overeenkomt met de id van de gebruiker die we willen tonen.

In dit geval hoeven we niet talloze mappen aan te maken voor elk mogelijk getal. Het is voldoende om dit deel van het adres als dynamisch te declareren. In dat geval wordt alle verkeer van dit type verwerkt door het algemene bestand page.jsx.

Om een dynamische parameter te maken, moet je de naam van de bijbehorende map in vierkante haken zetten. In ons geval wordt dat de volgende mapstructuur:

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

Laten we de bijbehorende component maken:

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

De parameter die we hebben ingesteld, zal worden opgeslagen in een speciaal object params. Laten we de waarde van deze parameter tonen:

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

Maak een route die adressen verwerkt van het type /city/:name, waar in plaats van :name elke tekenreeks kan staan.

Maak een route die adressen verwerkt van het type /show/:country/:city, waar in plaats van :country en :city elke tekenreeks kan staan.

Maak een route die adressen verwerkt van het type /post/:id, waar in plaats van :id elk getal kan staan.

Stel dat de volgende array gegeven is:

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

export default function Post() {
	
}

Zorg ervoor dat, afhankelijk van de waarde van de parameter id, in de opmaak van de component de bijbehorende post wordt getoond.

Maak een route die adressen verwerkt van het type /prod/:id, waar in plaats van :id elk getal kan staan.

Stel dat de volgende array gegeven is:

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

export default function Prod() {
	
}

Zorg ervoor dat, afhankelijk van de waarde van de parameter id, in de opmaak van de component het bijbehorende product wordt getoond.