Dados Compartilhados de Componentes no NextJS

Há situações em que vários componentes precisam acessar os mesmos dados. Como exemplo, vamos supor que temos um array com alguns usuários. Queremos que em uma rota seja exibida uma lista de usuários, e em outra rota com um parâmetro dinâmico - a descrição de um usuário específico pelo seu id.

Vamos implementar o que foi descrito. Façamos a seguinte estrutura de arquivos:

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

Vamos criar um arquivo separado com os dados dos usuários:

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

Vamos criar um componente para exibir a lista de usuários:

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

Vamos criar um componente para exibir um usuário específico pelo seu 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',
  },
];