Увоз података у 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,
  },
];