Dynamisk generering av länkar i NextJS

Låt oss säga att vi har en fil med användardata:

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

Låt oss skapa två komponenter. Den första komponenten kommer att visa en lista över användare med länkar till deras detaljerade beskrivning. Den andra komponenten kommer att visa denna detaljerade beskrivning.

Låt URL:en /users/list visa listan över alla användare, och URL:en /users/show/:id - en specifik användare baserat på deras id.

För att göra detta, skapa följande filstruktur:

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

Låt oss skapa den första komponenten, där vi dynamiskt genererar länkar i en loop, och sätter in id för varje användare:

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>;
}

Låt oss skapa en komponent för att visa en specifik användare baserat på deras 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>;
}

Följande array är given:

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',
	},
];

Skapa två komponenter. Låt den första visa en lista över produkter i form av länkar till en fullständig produktbeskrivning. Låt den andra komponenten visa en detaljerad produktbeskrivning.

Gör så att om ett id för en produkt som inte finns skickas i URL:en, så visas ett 404 fel på skärmen.