Импорт на данни в NextJS

В NextJS можем да извършваме импорт и експорт на произволни файлове. Това вече трябва да знаете, ако сте работили с ES6 модули. Логично е, че това ще работи и в NextJS, но за начинаещите не винаги е очевидно. Затова нека поговорим за импорти.

За пример нека имаме някаква страница. На тази страница искаме да покажем някакви данни. Нека, например, имаме някакъв масив с данни. Нека тези данни са толкова големи, че ни се струва удобно да ги изнесем в отделен файл.

Името на този файл може да бъде всякакво. Нека бъде data.js. В този файл ще поставим масива с данни. А във файла page.jsx ще имаме страница, която ще бъде обработвана от самия NextJS и ще се подава в браузъра.

Тоест ще имаме следната файлова структура:

/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 таблица.