Datu imports NextJS

NextJS mēs varam veikt patvaļīgu failu importu un eksportu. To jums jau vajadzētu prast, ja esat strādājis ar ES6 moduļiem. Loģiski, ka tas darbosies arī NextJS, bet iesācējiem tas ne vienmēr ir acīmredzams. Tāpēc parunāsim par importēšanu.

Piemēram, pieņemsim, ka mums ir noteikta lapa. Šajā lapā mēs vēlamies attēlot dažus datus. Pieņemsim, ka mums ir kāds datu masīvs. Pieņemsim, ka šie dati ir tik lieli, ka mums šķiet ērti tos iznest atsevišķā failā.

Šī faila nosaukums var būt jebkurš. Lai tas būtu data.js. Šajā failā mēs ievietosim datu masīvu. Un failā page.jsx būs mūsu lapa, kuru apstrādās pats NextJS un nodos pārlūkprogrammai.

Tas ir, mums būs šāda failu struktūra:

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

Ievietosim mūsu failā data.js kādu datu masīvu:

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

Izveidosim lapu page.jsx:

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

Pievienosim mūsu lapai datu masīvu:

import data from './data.js';

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

Attēlosim šos datus cilpā:

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

Ir dots šāds ierakstu masīvs:

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

Attēlojiet šos produktus saraksta ul veidā.

Ir dots šāds produktu masīvs:

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

Attēlojiet šos produktus HTML tabulas veidā.