Data Import in NextJS

In NextJS, we can perform import and export of arbitrary files. You should already know how to do this if you have worked with ES6 modules. Logically, this will also work in NextJS, but it is not always obvious to beginners. Therefore, let's talk about imports.

For example, let's say we have a certain page. On this page, we want to display some data. Let's say, for instance, we have an array with data. Let this data be so large that it seems convenient to us to put it in a separate file.

The name of this file can be anything. Let it be data.js. In this file, we will place an array with data. And in the page.jsx file, we will have a page that will be processed by NextJS itself and sent to the browser.

That is, we will have the following file structure:

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

Let's place some data array in our data.js file:

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

Let's create the page.jsx page:

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

Let's connect the data array to our page:

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

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

Let's output this data in a loop:

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