NextJS компоненттерінің жалпы деректері

Бірнеше компоненттер бір деректерге қол жеткізуі керек болатын жағдайлар болады. Мысал ретінде бізде қандай да бір пайдаланушылар массиві болсын. Бір роутта біз пайдаланушылар тізімін көрсеткіміз келеді, ал динамикалық параметрі бар басқа роутта - оның id бойынша нақты пайдаланушының сипаттамасы.

Сипатталғанды жүзеге асырайық. Мынадай файлдық құрылымды жасайық:

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

Пайдаланушылар деректерімен жеке файл жасайық:

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

Пайдаланушылар тізімін көрсету үшін компонент жасайық:

import users from '../users.js';

export default function List() {
	let list = users.map(user => {
		return <li>
			{user.name}
		</li>;
	});
	
	return <ul>
		{list}
	</ul>;
}

Пайдаланушыны оның 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>;
}

Мына массив берілген:

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

Екі компонент жасаңыз. Біріншісі өнімдер тізімін көрсетсін, ал екіншісі - өнімнің егжей-тегжейлі сипаттамасын.