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 таблицасы түрүндө чыгарыңыз.