Importul datelor în NextJS

În NextJS putem efectua importul și exportul fișierelor arbitrare. Acest lucru ar trebui să știți deja să faceți, dacă ați lucrat cu modulele ES6. Este logic că acest lucru va funcționa și în NextJS, dar pentru începători acest lucru nu este întotdeauna evident. Deci, să vorbim despre importuri.

De exemplu, să presupunem că avem o anumită pagină. Pe această pagină dorim să afișăm unele date. Să presupunem, de exemplu, că avem un anumit array cu date. Să zicem că aceste date sunt atât de mari, încât ni se pare convenabil să le mutăm într-un fișier separat.

Numele acestui fișier poate fi orice. Să fie data.js. În acest fișier vom plasa array-ul cu date. Iar în fișierul page.jsx va fi pagina noastră, care va fi procesată de către NextJS însuși și trimisă în browser.

Adică vom avea următoarea structură de fișiere:

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

Să plasăm în fișierul nostru data.js un anumit array cu date:

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

Să creăm pagina page.jsx:

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

Să conectăm la pagina noastră array-ul cu date:

import data from './data.js';

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

Să afișăm aceste date într-o buclă:

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

Să se dea următorul array de postări:

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

Afișați aceste produse sub forma unei liste ul.

Să se dea următorul array cu produse:

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

Afișați aceste produse sub forma unui tabel HTML.