Importação de dados em NextJS

No NextJS, podemos executar a importação e exportação de arquivos arbitrários. Isto você já deve saber fazer, se você trabalhou com módulos ES6. Logicamente, isso também funcionará no NextJS, mas para iniciantes nem sempre é óbvio. Portanto, vamos falar sobre importações.

Por exemplo, suponha que temos uma certa página. Nesta página, queremos exibir alguns dados. Suponha, por exemplo, que temos um certo array com dados. Suponha que esses dados sejam tão grandes que nos parece conveniente colocá-los em um arquivo separado.

O nome deste arquivo pode ser qualquer um. Suponha que seja data.js. Neste arquivo vamos colocar o array com os dados. E no arquivo page.jsx teremos a página, que será processada pelo próprio NextJS e enviada para o navegador.

Ou seja, teremos a seguinte estrutura de arquivos:

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

Vamos colocar em nosso arquivo data.js um certo array com dados:

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

Vamos fazer a página page.jsx:

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

Vamos conectar à nossa página o array com dados:

import data from './data.js';

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

Vamos exibir esses dados em um loop:

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

Suponha o seguinte array de posts:

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

Exiba esses posts na forma de uma lista ul.

Suponha o seguinte array com produtos:

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

Exiba esses produtos na forma de uma tabela HTML.