NextJSда маълумотларни импорт қилиш

NextJSда биз турли файлларни импорт ва экспорт қила оламиз. Бу сизга маълум бўлиши керак, агар сиз ES6 модуллари билан ишлаган бўлсангиз. Маълумки, бу NextJSда ҳам ишлайди, лекин янги бошланувчиларга бу ҳамеша аник бўла бермайди. Шунинг учун импортлар ҳақида гаplashaylik.

Мисол учун бизнинг бирор саҳифамиз бўлсин. Бу саҳифада биз маълумотларни чиқармоқчимиз. Масалан, бизда маълумотлар билан бирор массив бўлсин. Ушбу маълумотлар жуда катта бўлиб, уни алохида файлга чиқариб қўйиш қулайрок ҳисобланади.

Бу файлнинг номи исталганча бўлиши мумкин. 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 жадвал шаклида чиқаринг.