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.jsx
    - data.js

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

export default [
	1, 2, 3, 4, 5,
];

Let's create the page.jsx page:

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

Let's connect the data array to our page:

import data from './data.js';

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

Let's output this data in a loop:

import 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>
	</>;
}

Given the following array of posts:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

Display these products as a ul list.

Given the following array of products:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

Display these products as an HTML table.