Деректерді 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 кестесі түрінде көрсетіңіз.