Importera data i NextJS

I NextJS kan vi utföra import och export av godtyckliga filer. Detta bör du redan kunna om du har arbetat med ES6-moduler. Logiskt nog kommer detta att fungera även i NextJS, men för nybörjare är det inte alltid självklart. Därför låt oss prata om import.

Låt oss som exempel ha en viss sida. På denna sida vill vi visa vissa data. Låt oss till exempel anta att vi har en viss array med data. Låt dessa data vara så stora att det verkar bekvämt för oss att placera dem i en separat fil.

Namnet på denna fil kan vara vilket som helst. Låt det vara data.js. I denna fil placerar vi en array med data. Och i filen page.jsx kommer vi att ha sidan som kommer att bearbetas av NextJS själv och skickas till webbläsaren.

Det vill säga, vi kommer att ha följande filstruktur:

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

Låt oss placera i vår fil data.js en viss array med data:

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

Låt oss skapa sidan page.jsx:

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

Låt oss ansluta arrayen med data till vår sida:

import data from './data.js';

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

Låt oss visa dessa data 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>
	</>;
}

Låt följande array med inlägg ges:

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

Visa dessa produkter i form av en lista ul.

Låt följande array med produkter ges:

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

Visa dessa produkter i form av en HTML-tabell.