Importere data i NextJS

I NextJS kan vi utføre import og eksport av vilkårlige filer. Dette burde du allerede kunne, hvis du har jobbet med ES6-moduler. Logisk nok vil dette også fungere i NextJS, men for nybegynnere er det ikke alltid opplagt. Derfor la oss snakke om importer.

La oss som et eksempel ha en side. På denne siden ønsker vi å vise noen data. La oss for eksempel si at vi har en array med data. La disse dataene være så store at det virker praktisk for oss å flytte dem til en egen fil.

Navnet på denne filen kan være hva som helst. La oss kalle den data.js. I denne filen plasserer vi arrayen med data. Og i filen page.jsx vil vi ha siden som vil bli behandlet av NextJS selv og levert til nettleseren.

Det vil si at vi vil ha følgende filstruktur:

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

La oss plassere i vår fil data.js en array med data:

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

La oss lage siden page.jsx:

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

La oss koble arrayen med data til siden vår:

import data from './data.js';

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

La oss vise disse dataene i en 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>
	</>;
}

La følgende array med innlegg være gitt:

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

Vis disse produktene som en liste ul.

La følgende array med produkter være gitt:

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

Vis disse produktene som en HTML-tabell.