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 වගුවක් ලෙස ප්‍රදර්ශනය කරන්න.