Data Invoer in NextJS

In NextJS kan ons arbitrêre lêers invoer en uitvoer. Dit moet jy reeds kan doen, as jy met ES6 modules gewerk het. Logies dat dit ook in NextJS sal werk, maar vir beginners is dit nie altyd ooglopend nie. Laat ons dus oor invoer praat.

Laat ons vir voorbeeld 'n sekere bladsy hê. Op hierdie bladsy wil ons sekere data vertoon. Laat ons sê ons het 'n sekere array met data. Laat hierdie data so groot wees, dat dit vir ons gerieflik lyk om dit in 'n aparte lêer te plaas.

Die naam van hierdie lêer kan enigiets wees. Laat dit data.js wees. In hierdie lêer sal ons die array met data plaas. En in die lêer page.jsx sal ons die bladsy hê wat deur NextJS self verwerk word en aan die blaaier gegee word.

So ons sal die volgende lêerstruktuur hê:

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

Laat ons in ons lêer data.js 'n sekere array met data plaas:

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

Laat ons die bladsy page.jsx maak:

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

Laat ons die array met data by ons bladsy aansluit:

import data from './data.js';

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

Laat ons hierdie data in 'n lus vertoon:

import data from './data.js';

export default function Test() {
	let list = data.map(function(item) {
		return <li>{item}</li>
	});
	
	return <>
		<h1>Toets</h1>
		<ul>
			{list}
		</ul>
	</>;
}

Laat die volgende array met plasings gegee word:

let posts = [
	'plasing1',
	'plasing2',
	'plasing3',
	'plasing4',
	'plasing5',
];

Vertoon hierdie plasings in die vorm van 'n ul lys.

Laat die volgende array met produkte gegee word:

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

Vertoon hierdie produkte in die vorm van 'n HTML tabel.