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:

export 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:

import 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:

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

Dado o seguinte array:

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

Crie dois componentes. Deixe o primeiro mostrar a lista de produtos, e o segundo - a descrição detalhada de um produto.