Uvoz podatkov v NextJS

V NextJS lahko izvajamo uvoz in izvoz poljubnih datotek. To že morate znati, če ste delali z z ES6 moduli. Logično je, da bo to delovalo tudi v NextJS, vendar začetnikom to ni vedno očitno. Zato se pogovorimo o uvozih.

Za primer naj imamo neko stran. Na tej strani želimo prikazati nekatere podatke. Recimo, da imamo nek array s podatki. Naj bodo ti podatki tako veliki, da se nam zdi priročno, da jih postavimo v ločeno datoteko.

Ime te datoteke je lahko katerokoli. Naj bo data.js. V tej datoteki bomo postavili array s podatki. V datoteki page.jsx pa bo stran, ki jo bo obdelalo sam NextJS in poslalo v brskalnik.

To pomeni, da bomo imeli naslednjo datotečno strukturo:

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

Postavimo v našo datoteko data.js nek array s podatki:

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

Naredimo stran page.jsx:

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

Povežimo na našo stran array s podatki:

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

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

Prikažimo te podatke v zanki:

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