Data importeren in NextJS

In NextJS kunnen we willekeurige bestanden importeren en exporteren. Dit zou je al moeten kunnen als je gewerkt hebt met ES6 modules. Logischerwijs werkt dit ook in NextJS, maar voor beginners is dit niet altijd vanzelfsprekend. Laten we het daarom hebben over imports.

Stel dat we bijvoorbeeld een bepaalde pagina hebben. Op deze pagina willen we wat data tonen. Stel, we hebben een bepaalde array met data. Stel dat deze data zo groot is, dat het ons handig lijkt om deze in een apart bestand te plaatsen.

De naam van dit bestand kan alles zijn. Laten we het data.js noemen. In dit bestand plaatsen we een array met data. En in het bestand page.jsx hebben we de pagina die door NextJS zelf wordt verwerkt en naar de browser wordt gestuurd.

Dat betekent dat we de volgende bestandsstructuur zullen hebben:

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

Laten we in ons bestand data.js een bepaalde array met data plaatsen:

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

Laten we de pagina page.jsx maken:

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

Laten we de array met data importeren in onze pagina:

import data from './data.js';

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

Laten we deze data in een loop weergeven:

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

Stel we hebben de volgende array met posts:

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

Toon deze producten als een ul lijst.

Stel we hebben de volgende array met producten:

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

Toon deze producten als een HTML-tabel.