Import dat v NextJS

V NextJS můžeme provádět import a export libovolných souborů. To již umět máte, pokud jste pracovali s ES6 moduly. Logicky, že to bude fungovat i v NextJS, ale začátečníkům to není vždy zřejmé. Proto si povězme o importech.

Jako příklad mějme nějakou stránku. Na této stránce chceme zobrazit nějaká data. Nechť například máme nějaké pole s daty. Nechť jsou tato data tak velká, že se nám zdá vhodné umístit je do samostatného souboru.

Název tohoto souboru může být libovolný. Nechť je to data.js. V tomto souboru umístíme pole s daty. A v souboru page.jsx budeme mít stránku, která bude zpracována samotným NextJS a poskytnuta do prohlížeče.

To znamená, že budeme mít následující souborovou strukturu:

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

Umístěme do našeho souboru data.js nějaké pole s daty:

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

Vytvořme stránku page.jsx:

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

Připojme k naší stránce pole s daty:

import data from './data.js';

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

Zobrazme tato data v cyklu:

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 dán následující pole příspěvků:

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

Zobrazte tyto příspěvky jako seznam ul.

Nechť je dán následující pole s produkty:

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

Zobrazte tyto produkty jako HTML tabulku.