Uvoz podataka u NextJS

U NextJS možemo da izvršimo uvoz i izvoz proizvoljnih fajlova. Ovo već treba da znate, ako ste radili sa ES6 modulima. Logično je da će ovo raditi i u NextJS-u, ali početnicima to nije uvek očigledno. Stoga, razgovarajmo o uvozima.

Za primer, pretpostavimo da imamo određenu stranicu. Na ovoj stranici želimo da prikažemo neke podatke. Pretpostavimo, na primer, da imamo neki niz sa podacima. Pretpostavimo da su ti podaci toliko veliki, da nam se čini zgodnim da ih izdvojimo u poseban fajl.

Naziv ovog fajla može biti bilo koji. Neka bude data.js. U ovom fajlu ćemo smestiti niz sa podacima. A u fajlu page.jsx će biti stranica, koju će sam NextJS obraditi i proslediti brauzeru.

To jest, imaćemo sledeću fajl strukturu:

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

Smestimo u naš fajl data.js neki niz sa podacima:

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

Napravimo stranicu page.jsx:

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

Povežimo sa našom stranicom niz sa podacima:

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

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

Prikažimo ove podatke u petlji:

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