Importazione di dati in NextJS

In NextJS possiamo eseguire l'importazione e l'esportazione di file arbitrari. Questo dovresti già saperlo fare, se hai lavorato con moduli ES6. Logicamente, questo funzionerà anche in NextJS, ma per i principianti non è sempre ovvio. Quindi parliamo delle importazioni.

Ad esempio, supponiamo di avere una pagina. Su questa pagina vogliamo visualizzare alcuni dati. Supponiamo, ad esempio, di avere un array con dei dati. Supponiamo che questi dati siano così grandi che ci sembra conveniente metterli in un file separato.

Il nome di questo file può essere qualsiasi. Sia data.js. In questo file metteremo un array con i dati. E nel file page.jsx avremo la pagina, che verrà gestita dallo stesso NextJS e inviata al browser.

Cioè avremo la seguente struttura dei file:

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

Mettiamo nel nostro file data.js un array con dei dati:

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

Creiamo la pagina page.jsx:

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

Colleghiamo alla nostra pagina l'array con i dati:

import data from './data.js';

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

Visualizziamo questi dati in un ciclo:

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

Sia dato il seguente array di post:

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

Visualizza questi prodotti come una lista ul.

Sia dato il seguente array di prodotti:

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

Visualizza questi prodotti come una tabella HTML.