Date generale ale componentelor în NextJS

Există situații când mai multe componente trebuie să aibă acces la aceleași date. De exemplu, să presupunem că avem un vector cu utilizatori. Să zicem că pe o rută vrem să afișăm lista utilizatorilor, iar pe o altă rută cu parametru dinamic - descrierea unui utilizator specific după id-ul său.

Să implementăm cele descrise. Să facem următoarea structură de fișiere:

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

Să facem un fișier separat cu datele utilizatorilor:

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

Să facem un component pentru afișarea listei utilizatorilor:

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

Să facem un component pentru afișarea unui utilizator specific după id-ul său:

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