Імпарт даных у 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 табліцы.