Uvoz podataka u NextJS

U NextJS možemo da izvršimo uvoz i izvoz proizvoljnih fajlova. Ovo već treba da znate, ako ste radili sa ES6 modulima. Logično je da će ovo raditi i u NextJS-u, ali početnicima to nije uvek očigledno. Stoga, razgovarajmo o uvozima.

Za primer, pretpostavimo da imamo određenu stranicu. Na ovoj stranici želimo da prikažemo neke podatke. Pretpostavimo, na primer, da imamo neki niz sa podacima. Pretpostavimo da su ti podaci toliko veliki, da nam se čini zgodnim da ih izdvojimo u poseban fajl.

Naziv ovog fajla može biti bilo koji. Neka bude data.js. U ovom fajlu ćemo smestiti niz sa podacima. A u fajlu page.jsx će biti stranica, koju će sam NextJS obraditi i proslediti brauzeru.

To jest, imaćemo sledeću fajl strukturu:

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

Smestimo u naš fajl data.js neki niz sa podacima:

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

Napravimo stranicu page.jsx:

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

Povežimo sa našom stranicom niz sa podacima:

import data from './data.js';

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

Prikažimo ove podatke u petlji:

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

Neka je dat sledeći niz postova:

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

Prikažite ove proizvode u vidu liste ul.

Neka je dat sledeći niz sa proizvodima:

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

Prikažite ove proizvode u vidu HTML tabele.