Duomenų importavimas NextJS

NextJS mes galime atlikti savavališkų failų importą ir eksportą. Tai jūs jau turėtumėte mokėti, jei dirbote su ES6 moduliais. Logiška, kad tai veiks ir NextJS, bet pradedantiesiems tai ne visada akivaizdu. Todėl pakalbėkime apie importus.

Pavyzdžiui, tegu mes turime tam tikrą puslapį. Šiame puslapyje norime atvaizduoti tam tikrus duomenis. Tegu, pavyzdžiui, mes turime tam tikrą masyvą su duomenimis. Tegu šie duomenys yra tokie dideli, kad mums atrodo patogu juos išskirti į atskirą failą.

Šio failo pavadinimas gali būti bet koks. Tegu bus data.js. Šiame faile mes patalpinsime masyvą su duomenimis. O faile page.jsx mes turėsime puslapį, kurį apdoros pats NextJS ir perduos į naršyklę.

Tai yra, mes turėsime tokią failų struktūrą:

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

Patalpinkime mūsų faile data.js tam tikrą masyvą su duomenimis:

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

Sukurkime puslapį page.jsx:

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

Prijungkime prie mūsų puslapio masyvą su duomenimis:

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

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

Atvaizduokime šiuos duomenis cikle:

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