Datu imports NextJS

NextJS mēs varam veikt patvaļīgu failu importu un eksportu. To jums jau vajadzētu prast, ja esat strādājis ar ES6 moduļiem. Loģiski, ka tas darbosies arī NextJS, bet iesācējiem tas ne vienmēr ir acīmredzams. Tāpēc parunāsim par importēšanu.

Piemēram, pieņemsim, ka mums ir noteikta lapa. Šajā lapā mēs vēlamies attēlot dažus datus. Pieņemsim, ka mums ir kāds datu masīvs. Pieņemsim, ka šie dati ir tik lieli, ka mums šķiet ērti tos iznest atsevišķā failā.

Šī faila nosaukums var būt jebkurš. Lai tas būtu data.js. Šajā failā mēs ievietosim datu masīvu. Un failā page.jsx būs mūsu lapa, kuru apstrādās pats NextJS un nodos pārlūkprogrammai.

Tas ir, mums būs šāda failu struktūra:

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

Ievietosim mūsu failā data.js kādu datu masīvu:

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

Izveidosim lapu page.jsx:

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

Pievienosim mūsu lapai datu masīvu:

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

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

Attēlosim šos datus cilpā:

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