Uvoz podatkov v NextJS

V NextJS lahko izvajamo uvoz in izvoz poljubnih datotek. To že morate znati, če ste delali z z ES6 moduli. Logično je, da bo to delovalo tudi v NextJS, vendar začetnikom to ni vedno očitno. Zato se pogovorimo o uvozih.

Za primer naj imamo neko stran. Na tej strani želimo prikazati nekatere podatke. Recimo, da imamo nek array s podatki. Naj bodo ti podatki tako veliki, da se nam zdi priročno, da jih postavimo v ločeno datoteko.

Ime te datoteke je lahko katerokoli. Naj bo data.js. V tej datoteki bomo postavili array s podatki. V datoteki page.jsx pa bo stran, ki jo bo obdelalo sam NextJS in poslalo v brskalnik.

To pomeni, da bomo imeli naslednjo datotečno strukturo:

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

Postavimo v našo datoteko data.js nek array s podatki:

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

Naredimo stran page.jsx:

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

Povežimo na našo stran array s podatki:

import data from './data.js';

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

Prikažimo te podatke v zanki:

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

Naj bo podan naslednji array objav:

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

Prikažite te produkte v obliki seznama ul.

Naj bo podan naslednji array z izdelki:

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

Prikažite te izdelke v obliki HTML tabele.