Импорт данных в NextJS

В NextJS мы можем выполнять импорт и экспорт произвольных файлов. Это вы уже должны уметь, если вы работали с с ES6 модулями. Логично, что это будет работать и в NextJS, но новичкам это не всегда очевидно. Поэтому давайте поговорим про импорты.

Для примера пусть у нас есть некоторая страница. На этой странице мы хотим вывести некоторые данные. Пусть, к примеру, у нас есть некоторый массив с данными. Пусть эти данные настолько большие, что нам кажется удобным вынести их в отдельный файл.

Название этого файла может быть любым. Пусть будет data.js. В этом файле мы разместим массив с данными. А в файле page.jsx у нас будет страница, которая будет обрабатываться самим NextJS и отдаваться в браузер.

To есть у нас будет следующая файловая структура:

/src/
- /app/
  - /test/
    - page.jsx
    - data.js

Разместим в нашем файле data.js некоторый массив с данными:

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

Сделаем страницу page.jsx:

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

Подключим к нашей странице массив с данными:

import data from './data.js';

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

Выведем эти данные в цикле:

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

Пусть дан следующий массив постов:

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

Выведите эти продукты в виде списка ul.

Пусть дан следующий массив с продуктами:

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

Выведите эти продукты в виде HTML таблицы.