Importimi i të Dhënave në NextJS

Në NextJS ne mund të kryejmë import dhe eksport të skedarëve arbitrar. Këtë ju tashmë duhet ta dini nëse keni punuar me modulet ES6. Logjikisht, kjo do të funksionojë edhe në NextJS, por fillestarëve nuk u është gjithmonë e qartë. Prandaj, le të flasim për importet.

Për shembull, le të kemi një faqe. Në këtë faqe ne duam të shfaqim disa të dhëna. Le të themi, për shembull, ne kemi disa grupe me të dhëna. Le që këto të dhëna të jenë aq të mëdha, saqë na duket e përshtatshme t'i vendosim ato në një skedar të veçantë.

Emri i këtij skedari mund të jetë çfarëdo. Le të jetë data.js. Në këtë skedar ne do të vendosim grupin me të dhëna. Ndërsa në skedarin page.jsx do të kemi faqen, e cila do të përpunohet nga NextJS-i vetë dhe do të dërgohet në shfletues.

Domethënë, ne do të kemi strukturën e mëposhtme të skedarëve:

• /src//app//test/page.jsxdata.js

Le të vendosim në skedarin tonë data.js disa grupe me të dhëna:

src/app/test/data.jsexport default [
  1, 2, 3, 4, 5,
];

Le të krijojmë faqen page.jsx:

src/app/test/page.jsxexport default function Test() {
  return <h1>Test</h1>;
}

Le të lidhim në faqen tonë grupin me të dhëna:

src/app/test/page.jsximport data from './data.js';

export default function Test() {
  return <h1>Test</h1>;
}

Le t'i shfaqim këto të dhëna në një cikël:

src/app/test/page.jsximport data from './data.js';

export default function Test() {
  let list = data.map(function(item) {
    return <li>{item}</li>
  });
  
  return <>
    <h1>Test</h1>
    <ul>
      {list}
    </ul>
  </>;
}

posts.jslet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

prods.jslet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];