Komponentu kopīgie dati NextJS

Ir situācijas, kad vairākiem komponentiem jābūt piekļuvei vieniem un tiem pašiem datiem. Piemēram, pieņemsim, ka mums ir noteikts masīvs ar lietotājiem. Pieņemsim, ka vienā route mēs vēlamies parādīt lietotāju sarakstu, bet citā route ar dinamisku parametru - konkrēta lietotāja aprakstu pēc viņa id.

Īstenosim aprakstīto. Izveidosim šādu failu struktūru:

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

Izveidosim atsevišķu failu ar lietotāju datiem:

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

Izveidosim komponentu, lai parādītu lietotāju sarakstu:

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

Izveidosim komponentu, lai attēlotu noteiktu lietotāju pēc viņa 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',
  },
];