Импорт на податоци во 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,
  },
];