Импорт на данни в NextJS

В NextJS можем да извършваме импорт и експорт на произволни файлове. Това вече трябва да знаете, ако сте работили с ES6 модули. Логично е, че това ще работи и в NextJS, но за начинаещите не винаги е очевидно. Затова нека поговорим за импорти.

За пример нека имаме някаква страница. На тази страница искаме да покажем някакви данни. Нека, например, имаме някакъв масив с данни. Нека тези данни са толкова големи, че ни се струва удобно да ги изнесем в отделен файл.

Името на този файл може да бъде всякакво. Нека бъде data.js. В този файл ще поставим масива с данни. А във файла page.jsx ще имаме страница, която ще бъде обработвана от самия NextJS и ще се подава в браузъра.

Тоест ще имаме следната файлова структура:

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

Поставим в нашия файл data.js някакъв масив с данни:

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

Направим страницата page.jsx:

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

Свържем към нашата страница масива с данни:

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

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

Покажем тези данни в цикъл:

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