Importowanie danych w NextJS

W NextJS możemy wykonywać import i export dowolnych plików. To powinieneś już umieć, jeśli pracowałeś z modułami ES6. Logiczne, że to będzie działać również w NextJS, ale dla początkujących nie zawsze jest to oczywiste. Dlatego porozmawiajmy o importach.

Dla przykładu załóżmy, że mamy jakąś stronę. Na tej stronie chcemy wyświetlić pewne dane. Niech, na przykład, mamy pewną tablicę z danymi. Niech te dane będą na tyle duże, że wydaje nam się wygodne umieszczenie ich w oddzielnym pliku.

Nazwa tego pliku może być dowolna. Niech będzie data.js. W tym pliku umieścimy tablicę z danymi. A w pliku page.jsx będziemy mieli stronę, która będzie przetwarzana przez sam NextJS i wysyłana do przeglądarki.

Czyli będziemy mieli następującą strukturę plików:

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

Umieśćmy w naszym pliku data.js pewną tablicę z danymi:

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

Stwórzmy stronę page.jsx:

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

Podłączmy do naszej strony tablicę z danymi:

import data from './data.js';

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

Wyświetlmy te dane w pętli:

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

Niech będzie dana następująca tablica postów:

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

Wyświetl te produkty w postaci listy ul.

Niech będzie dana następująca tablica z produktami:

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

Wyświetl te produkty w postaci tabeli HTML.