Import dát v NextJS

V NextJS môžeme vykonávať import a export ľubovoľných súborov. Toto by ste už mali vedieť, ak ste pracovali s ES6 modulmi. Logicky, že to bude fungovať aj v NextJS, ale začiatočníkom to nie je vždy jasné. Preto si povedzme niečo o importoch.

Pre príklad nech máme nejakú stránku. Na tejto stránke chceme zobraziť nejaké dáta. Nech, napríklad, máme nejaké pole s dátami. Nech sú tieto dáta také veľké, že sa nám zdá vhodné vyčleniť ich do samostatného súboru.

Názov tohto súboru môže byť ľubovoľný. Nech je to data.js. V tomto súbore umiestnime pole s dátami. A v súbore page.jsx budeme mať stránku, ktorá bude spracovávaná samotným NextJS a odovzdávaná do prehliadača.

To znamená, že budeme mať nasledujúcu súborovú štruktúru:

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

Umiestnime do nášho súboru data.js nejaké pole s dátami:

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

Vytvorme stránku page.jsx:

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

Pripojme k našej stránke pole s dátami:

import data from './data.js';

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

Zobrazme tieto dáta v cykle:

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

Nech je dané nasledujúce pole príspevkov:

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

Zobrazte tieto produkty vo forme zoznamu ul.

Nech je dané nasledujúce pole s produktmi:

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

Zobrazte tieto produkty vo forme HTML tabuľky.