Kuingiza Data kwenye NextJS

Katika NextJS tunaweza kufanya kuingiza na kutohariri faili za kiholela. Hii unapaswa kuwa tayari unajua, ikiwa umefanya kazi na ES6 moduli. Ni mantiki kwamba hii itafanya kazi pia katika NextJS, lakini wanaoanza sio wakati wote wanaona wazi. Kwa hivyo hebu tuzungumze juu ya kuingiza.

Kwa mfano tuwe na ukurasa fulani. Kwenye ukurasa huu tunataka kuonyesha data fulani. Hebu, kwa mfano, tuwe na safu fulani yenye data. Hebu data hii iwe kubwa sana, kwa hivyo tunaona ni rahisi kuiweka kwenye faili tofauti.

Jina la faili hili linaweza kuwa lolote. Hebu iwe data.js. Kwenye faili hii tutaweka safu yenye data. Na kwenye faili page.jsx tutakuwa na ukurasa ambao utakayotayarishwa na NextJS yenyewe na kutolewa kwenye kivinjari.

Hii ina maana tutakuwa na muundo wa faili ufuatayo:

/src/
- /app/
  - /test/
    - page.jsx
    - data.js

Tuweke kwenye faili yetu data.js safu fulani yenye data:

export default [
	1, 2, 3, 4, 5,
];

Tutengeneze ukurasa page.jsx:

export default function Test() {
	return <h1>Test</h1>;
}

Tutaunganisha kwenye ukurasa wetu safu yenye data:

import data from './data.js';

export default function Test() {
	return <h1>Test</h1>;
}

Tuonyeshe data hii kwa kutumia kitanzi:

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>
	</>;
}

Hebu iwe na safu ifuatayo ya machapisho:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

Onyesha bidhaa hizi kwa kutumia orodha ya ul.

Hebu iwe na safu ifuatayo ya bidhaa:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

Onyesha bidhaa hizi kwa kutumia jedwali la HTML.