Дар 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 чоп кунед.