Datenimport in NextJS

In NextJS können wir beliebige Dateien importieren und exportieren. Dies solltest du bereits können, wenn du mit ES6-Modulen gearbeitet hast. Logischerweise wird dies auch in NextJS funktionieren, aber für Anfänger ist das nicht immer offensichtlich. Deshalb lasst uns über Imports sprechen.

Nehmen wir als Beispiel eine beliebige Seite. Auf dieser Seite möchten wir einige Daten anzeigen. Nehmen wir an, wir haben ein Array mit Daten. Nehmen wir an, diese Daten sind so umfangreich, dass es uns praktisch erscheint, sie in eine separate Datei auszulagern.

Der Name dieser Datei kann beliebig sein. Nennen wir sie data.js. In dieser Datei platzieren wir ein Array mit Daten. Und in der Datei page.jsx befindet sich die Seite, die von NextJS selbst verarbeitet und an den Browser gesendet wird.

Das heißt, wir haben die folgende Dateistruktur:

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

Platzieren wir in unserer Datei data.js ein Array mit Daten:

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

Erstellen wir die Seite page.jsx:

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

Binden wir unser Array mit Daten in unsere Seite ein:

import data from './data.js';

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

Lassen wir diese Daten in einer Schleife ausgeben:

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

Gegeben sei das folgende Array mit Posts:

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

Gib diese Produkte in Form einer ul-Liste aus.

Gegeben sei das folgende Array mit Produkten:

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

Gib diese Produkte in Form einer HTML-Tabelle aus.