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