Dynamische Link-Generierung in NextJS

Angenommen, wir haben eine Datei mit Benutzerdaten:

export default users = [
	{
		id: 1,
		name: 'name1',
		surn: 'surn1',
	},
	{
		id: 2,
		name: 'name2',
		surn: 'surn2',
	},
	{
		id: 3,
		name: 'name3',
		surn: 'surn3',
	},
];

Lassen Sie uns zwei Komponenten erstellen. Die erste Komponente zeigt eine Liste von Benutzern mit Links zu ihren Detailbeschreibungen. Die zweite Komponente wird diese Detailbeschreibung anzeigen.

Unter der URL /users/list soll die Liste aller Benutzer angezeigt werden, und unter der URL /users/show/:id - ein bestimmter Benutzer anhand seiner ID.

Dazu erstellen wir die folgende Dateistruktur:

/app/
- /users/
  - users.js
  - /list/
    - page.jsx
  - /show/[id]/
    - page.jsx

Erstellen wir die erste Komponente, in der wir dynamisch Links in einer Schleife generieren und dabei die id jedes Benutzers einfügen:

import users from '../users.js';
import Link from 'next/link';

export default function List() {
	let list = users.map(user => {
		return <li>
			<Link href={`/users/show/${user.id}`}>
				{user.name}
			</Link>
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Erstellen wir eine Komponente zur Anzeige eines bestimmten Benutzers anhand seiner id:

import users from '../../users.js';

export default function User({params}) {
	let user = users[params.id];
	
	return <div>
		<span>{user.id}</span>
		<span>{user.name}</span>
		<span>{user.surn}</span>
	</div>;
}

Gegeben ist das folgende Array:

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

Erstellen Sie zwei Komponenten. Lassen Sie die erste eine Produktliste in Form von Links zur vollständigen Produktbeschreibung anzeigen. Lassen Sie die zweite Komponente die detaillierte Produktbeschreibung anzeigen.

Sorgen Sie dafür, dass, wenn eine ID eines nicht vorhandenen Produkts in der URL übergeben wird, ein 404 Fehler angezeigt wird.