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

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

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

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

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

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

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

app/users/list/page.jsximport users from '../users.js';

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

Ας δημιουργήσουμε ένα στοιχείο για την εμφάνιση ενός συγκεκριμένου χρήστη βάσει του id του:

app/users/show/[id]/page.jsximport 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>;
}

/app/prods/prods.jslet 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',
  },
];