Општи податоци за компонентите во 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',
  },
];