Adatok importálása NextJS-ben

A NextJS-ben tetszőleges fájlokat importálhatunk és exportálhatunk. Ezt már tudnia kell, ha már dolgozott ES6 modulokkal. Logikus, hogy ez a NextJS-ben is működni fog, de kezdők számára ez nem mindig nyilvánvaló. Ezért beszéljünk az importokról.

Példaként legyen egy oldalunk. Ezen az oldalon ki szeretnénk jeleníteni néhány adatot. Legyen például egy tömbünk adatokkal. Legyenek ezek az adatok olyan nagyok, hogy kényelmesnek tűnik külön fájlba kiszervezni őket.

Ennek a fájlnak a neme tetszőleges lehet. Legyen data.js. Ebben a fájlban elhelyezzük az adatokat tartalmazó tömböt. A page.jsx fájlban pedig lesz az oldalunk, amelyet maga a NextJS fog feldolgozni és a böngészőbe szolgáltatni.

Azaz a következő fájlstruktúránk lesz:

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

Helyezzük el a data.js fájlunkban egy adattömböt:

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

Készítsük el a page.jsx oldalt:

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

Kapcsoljuk össze oldalunkat az adattömbbel:

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

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

Jelenítsük meg ezeket az adatokat egy ciklusban:

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