Données générales des composants dans NextJS

Il arrive que plusieurs composants doivent accéder aux mêmes données. Prenons l'exemple d'un tableau d'utilisateurs. Supposons que sur une route nous souhaitions afficher la liste des utilisateurs, et sur une autre route avec un paramètre dynamique - la description d'un utilisateur spécifique par son id.

Implémentons ce qui a été décrit. Créons la structure de fichiers suivante :

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

Créons un fichier séparé avec les données des utilisateurs :

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

Créons un composant pour afficher la liste des utilisateurs :

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

Créons un composant pour afficher un utilisateur spécifique par son 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',
  },
];