Importimi i të Dhënave në NextJS

Në NextJS ne mund të kryejmë import dhe eksport të skedarëve arbitrar. Këtë ju tashmë duhet ta dini nëse keni punuar me modulet ES6. Logjikisht, kjo do të funksionojë edhe në NextJS, por fillestarëve nuk u është gjithmonë e qartë. Prandaj, le të flasim për importet.

Për shembull, le të kemi një faqe. Në këtë faqe ne duam të shfaqim disa të dhëna. Le të themi, për shembull, ne kemi disa grupe me të dhëna. Le që këto të dhëna të jenë aq të mëdha, saqë na duket e përshtatshme t'i vendosim ato në një skedar të veçantë.

Emri i këtij skedari mund të jetë çfarëdo. Le të jetë data.js. Në këtë skedar ne do të vendosim grupin me të dhëna. Ndërsa në skedarin page.jsx do të kemi faqen, e cila do të përpunohet nga NextJS-i vetë dhe do të dërgohet në shfletues.

Domethënë, ne do të kemi strukturën e mëposhtme të skedarëve:

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

Le të vendosim në skedarin tonë data.js disa grupe me të dhëna:

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

Le të krijojmë faqen page.jsx:

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

Le të lidhim në faqen tonë grupin me të dhëna:

import data from './data.js';

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

Le t'i shfaqim këto të dhëna në një cikël:

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

Le të jepet grupi i mëposhtëm i postimeve:

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

Shfaqini këto produkte në formën e një liste ul.

Le të jepet grupi i mëposhtëm me produkte:

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

Shfaqini këto produkte në formën e një tabele HTML.