Andmete importimine NextJS-s

NextJS-s saame teha suvaliste failide importimise ja eksportimise. Seda sa peaksid juba oskama, kui oled töötanud ES6 moodulitega. Loogiliselt peaks see toimima ka NextJS-s, kuid algajatele pole see alati ilmne. Seetõttu räägime importidest.

Näiteks olgu meil mingi lehekülg. Sellel lehel tahame kuvada mõningaid andmeid. Olgu meil näiteks mõni andmemassiiv. Olgu need andmed nii suured, et tundub mugav need eraldi faili viia.

Selle faili nimi võib olla suvaline. Olgu see data.js. Sellesse faili paneme andmemassiivi. Failis page.jsx on meil lehekülg, mida töötleb NextJS ise ja saadab brauserisse.

See tähendab, et meil on järgmine failistruktuur:

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

Paneme oma faili data.js mõne andmemassiivi:

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

Teeme lehekülje page.jsx:

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

Ühendame oma lehele andmemassiivi:

import data from './data.js';

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

Kuvame need andmed tsüklis:

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

Olgu antud järgmine postituste massiiv:

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

Kuva need postitused loendina ul.

Olgu antud järgmine massiiv toodetega:

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

Kuva need tooted HTML tabelina.