Կոմպոնենտների ընդհանուր տվյալները NextJS-ում

Լինում են իրավիճակներ, երբ մի քանի կոմպոնենտներ պետք է մուտք ունենան նույն տվյալներին։ Որպես օրինակ, եկեք ունենանք որոշակի զանգված օգտատերերով։ Ենթադրենք, մի երթուղում մենք ցանկանում ենք ցույց տալ օգտատերերի ցանկը, իսկ մեկ այլ երթուղում դինամիկ պարամետրով՝ կոնկրետ օգտատիրոջ նկարագրությունը նրա id-ով։

Եկեք իրականացնենք նկարագրվածը։ Կստեղծենք հետևյալ ֆայլային կառուցվածքը․

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

Եկեք ստեղծենք առանձին ֆայլ օգտատերերի տվյալներով․

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

Եկեք ստեղծենք կոմպոնենտ օգտատերերի ցանկը ցույց տալու համար․

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

Եկեք ստեղծենք կոմպոնենտ օգտատիրոջ մասին տեղեկատվությունը նրա 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',
  },
];