Կոմպոնենտների ընդհանուր տվյալները 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',
	},
];

Կատարեք երկու կոմպոնենտ։ Թող առաջինը ցույց տա ապրանքների ցանկը, իսկ երկրորդը՝ ապրանքի մանրամասն նկարագրությունը։