Duomenų importavimas NextJS

NextJS mes galime atlikti savavališkų failų importą ir eksportą. Tai jūs jau turėtumėte mokėti, jei dirbote su ES6 moduliais. Logiška, kad tai veiks ir NextJS, bet pradedantiesiems tai ne visada akivaizdu. Todėl pakalbėkime apie importus.

Pavyzdžiui, tegu mes turime tam tikrą puslapį. Šiame puslapyje norime atvaizduoti tam tikrus duomenis. Tegu, pavyzdžiui, mes turime tam tikrą masyvą su duomenimis. Tegu šie duomenys yra tokie dideli, kad mums atrodo patogu juos išskirti į atskirą failą.

Šio failo pavadinimas gali būti bet koks. Tegu bus data.js. Šiame faile mes patalpinsime masyvą su duomenimis. O faile page.jsx mes turėsime puslapį, kurį apdoros pats NextJS ir perduos į naršyklę.

Tai yra, mes turėsime tokią failų struktūrą:

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

Patalpinkime mūsų faile data.js tam tikrą masyvą su duomenimis:

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

Sukurkime puslapį page.jsx:

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

Prijungkime prie mūsų puslapio masyvą su duomenimis:

import data from './data.js';

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

Atvaizduokime šiuos duomenis cikle:

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

Tegu pateiktas toks pranešimų masyvas:

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

Atvaizduokite šiuos produktus kaip ul sąrašą.

Tegu pateiktas toks produktų masyvas:

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

Atvaizduokite šiuos produktus HTML lentelės pavidalu.