Adatok importálása NextJS-ben

A NextJS-ben tetszőleges fájlokat importálhatunk és exportálhatunk. Ezt már tudnia kell, ha már dolgozott ES6 modulokkal. Logikus, hogy ez a NextJS-ben is működni fog, de kezdők számára ez nem mindig nyilvánvaló. Ezért beszéljünk az importokról.

Példaként legyen egy oldalunk. Ezen az oldalon ki szeretnénk jeleníteni néhány adatot. Legyen például egy tömbünk adatokkal. Legyenek ezek az adatok olyan nagyok, hogy kényelmesnek tűnik külön fájlba kiszervezni őket.

Ennek a fájlnak a neme tetszőleges lehet. Legyen data.js. Ebben a fájlban elhelyezzük az adatokat tartalmazó tömböt. A page.jsx fájlban pedig lesz az oldalunk, amelyet maga a NextJS fog feldolgozni és a böngészőbe szolgáltatni.

Azaz a következő fájlstruktúránk lesz:

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

Helyezzük el a data.js fájlunkban egy adattömböt:

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

Készítsük el a page.jsx oldalt:

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

Kapcsoljuk össze oldalunkat az adattömbbel:

import data from './data.js';

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

Jelenítsük meg ezeket az adatokat egy ciklusban:

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

Legyen a következő bejegyzéstömb adott:

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

Jelenítse meg ezeket a termékeket egy ul listában.

Legyen a következő terméktömb adott:

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

Jelenítse meg ezeket a termékeket HTML táblázat formájában.