Dynamische Routen in NextJS

In NextJS können dynamische Routen erstellt werden. Solche Routen setzen voraus, dass ein Teil der URL einen beliebigen Wert haben kann. Als Beispiel nehmen wir die Adresse /users/1, in der statt der Eins jede Zahl stehen kann, die technisch der ID des Users entspricht, den wir ausgeben möchten.

In diesem Fall müssen wir nicht viele Ordner für jede mögliche Zahl erstellen. Es reicht aus, diesen Teil der Adresse als dynamisch zu deklarieren. In diesem Fall wird eine gemeinsame Datei page.jsx alle Anfragen dieser Art verarbeiten.

Um einen dynamischen Parameter zu erstellen, muss der Name des entsprechenden Ordners in eckige Klammern gesetzt werden. In unserem Fall wäre das die folgende Ordnerstruktur:

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

Lassen Sie uns die entsprechende Komponente erstellen:

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

Dabei wird der von uns gesetzte Parameter in einem speziellen Objekt params gespeichert. Lassen Sie uns den Wert dieses Parameters ausgeben:

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

Erstellen Sie eine Route, die Adressen des Typs /city/:name verarbeitet, wobei statt :name eine beliebige Zeichenkette stehen kann.

Erstellen Sie eine Route, die Adressen des Typs /show/:country/:city verarbeitet, wobei statt :country und :city beliebige Zeichenketten stehen können.

Erstellen Sie eine Route, die Adressen des Typs /post/:id verarbeitet, wobei statt :id eine beliebige Zahl stehen kann.

Gegeben sei das folgende Array:

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

export default function Post() {
	
}

Sorgen Sie dafür, dass abhängig vom Wert des Parameters id in der Darstellung der Komponente der entsprechende Post ausgegeben wird.

Erstellen Sie eine Route, die Adressen des Typs /prod/:id verarbeitet, wobei statt :id eine beliebige Zahl stehen kann.

Gegeben sei das folgende Array:

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

export default function Prod() {
	
}

Sorgen Sie dafür, dass abhängig vom Wert des Parameters id in der Darstellung der Komponente das entsprechende Produkt ausgegeben wird.