Importación de datos en NextJS

En NextJS podemos realizar la importación y exportación de archivos arbitrarios. Esto ya deberías saberlo si has trabajado con módulos ES6. Lógicamente, esto también funcionará en NextJS, pero para los principiantes no siempre es obvio. Por lo tanto, hablemos sobre las importaciones.

Por ejemplo, supongamos que tenemos una página. En esta página queremos mostrar algunos datos. Supongamos, por ejemplo, que tenemos un array con datos. Supongamos que estos datos son tan grandes que nos parece conveniente extraerlos a un archivo separado.

El nombre de este archivo puede ser cualquiera. Que sea data.js. En este archivo colocaremos el array con los datos. Y en el archivo page.jsx tendremos la página, que será procesada por el propio NextJS y enviada al navegador.

Es decir, tendremos la siguiente estructura de archivos:

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

Coloquemos en nuestro archivo data.js un array con datos:

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

Hagamos la página page.jsx:

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

Conectemos a nuestra página el array con datos:

import data from './data.js';

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

Mostremos estos datos en un bucle:

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

Supongamos que se da el siguiente array de publicaciones:

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

Muestra estas publicaciones en forma de lista ul.

Supongamos que se da el siguiente array de productos:

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

Muestra estos productos en forma de tabla HTML.