Γενικά Δεδομένα Στοιχείων στο NextJS

Υπάρχουν περιπτώσεις όπου πολλά στοιχεία πρέπει να έχουν πρόσβαση στα ίδια δεδομένα. Για παράδειγμα, ας υποθέσουμε ότι έχουμε έναν πίνακα με χρήστες. Ας πούμε ότι σε μια διαδρομή θέλουμε να εμφανίσουμε τη λίστα των χρηστών, και σε άλλη διαδρομή με δυναμική παράμετρο - την περιγραφή ενός συγκεκριμένου χρήστη βάσει του id του.

Ας υλοποιήσουμε αυτό που περιγράφηκε. Ας δημιουργήσουμε την ακόλουθη δομή αρχείων:

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

Ας δημιουργήσουμε ένα ξεχωριστό αρχείο με τα δεδομένα των χρηστών:

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

Ας δημιουργήσουμε ένα στοιχείο για την εμφάνιση της λίστας των χρηστών:

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

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

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

Δημιουργήστε δύο στοιχεία. Ας προβάλλει το πρώτο τη λίστα των προϊόντων, και το δεύτερο - την αναλυτική περιγραφή του προϊόντος.