Δυναμική Δημιουργία Συνδέσμων στο NextJS

Ας υποθέσουμε ότι έχουμε ένα αρχείο με δεδομένα χρηστών:

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

Ας δημιουργήσουμε δύο components. Το πρώτο component θα εμφανίζει μια λίστα χρηστών με συνδέσμους για την αναλυτική τους περιγραφή. Το δεύτερο component θα εμφανίζει αυτήν την αναλυτική περιγραφή.

Ας υποθέσουμε ότι στο URL /users/list θα εμφανίζεται η λίστα όλων των χρηστών, και στο URL /users/show/:id - ένας συγκεκριμένος χρήστης βάσει του id του.

Για να το επιτύχουμε αυτό, ας δημιουργήσουμε την ακόλουθη δομή αρχείων:

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

Ας δημιουργήσουμε το πρώτο component, στο οποίο θα δημιουργούμε δυναμικά συνδέσμους σε έναν βρόχο, εισάγοντας σε αυτούς το id κάθε χρήστη:

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

Ας δημιουργήσουμε ένα component για την εμφάνιση ενός συγκεκριμένου χρήστη βάσει του 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>;
}

Δίνεται ο ακόλουθος πίνακας:

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

Δημιουργήστε δύο components. Ας εμφανίζει το πρώτο μια λίστα προϊόντων σε μορφή συνδέσμων προς την πλήρη περιγραφή του προϊόντος. Ας εμφανίζει το δεύτερο component την αναλυτική περιγραφή του προϊόντος.

Φροντίστε ώστε, εάν στο URL περάσετε ένα id μη υπάρχοντος προϊόντος, να εμφανίζεται στην οθόνη ένα 404 σφάλμα.