Import af data i NextJS

I NextJS kan vi udføre import og eksport af vilkårlige filer. Dette burde du allerede kunne, hvis du har arbejdet med ES6-moduler. Logisk nok vil dette også fungere i NextJS, men for begyndere er det ikke altid indlysende. Derfor, lad os tale om import.

Lad os som eksempel have en bestemt side. På denne side ønsker vi at vise nogle data. Lad os for eksempel sige, at vi har en bestemt matrix med data. Lad disse data være så store, at det synes praktisk for os at flytte dem til en separat fil.

Navnet på denne fil kan være hvad som helst. Lad os kalde den data.js. I denne fil placerer vi en matrix med data. Og i filen page.jsx vil vi have siden, som vil blive behandlet af NextJS selv og leveret til browseren.

Det vil sige, vi vil have følgende filstruktur:

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

Lad os placere en bestemt matrix med data i vores fil data.js:

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

Lad os lave siden page.jsx:

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

Lad os tilkoble datamatricen til vores side:

import data from './data.js';

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

Lad os vise disse data i en løkke:

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

Lad følgende matrix med opslag være givet:

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

Vis disse produkter som en ul-liste.

Lad følgende matrix med produkter være givet:

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

Vis disse produkter som en HTML-tabel.