Импорт на податоци во NextJS

Во NextJS можеме да извршуваме импорт и експорт на произволни датотеки. Ова веќе треба да го знаете, ако сте работеле со ES6 модули. Логично е дека ова ќе функционира и во NextJS, но за почетниците тоа не е секогаш очигледно. Затоа, да разговараме за импортите.

За пример, нека имаме одредена страница. На оваа страница сакаме да прикажеме некои податоци. Нека, на пример, имаме одредена низа со податоци. Нека овие податоци се толку големи, дека ни се чини погодно да ги издвоиме во посебна датотека.

Името на оваа датотека може да биде било какво. Нека биде data.js. Во оваа датотека ќе сместиме низа со податоци. А во датотеката page.jsx ќе имаме страница, која ќе биде обработувана од самиот NextJS и ќе се испраќа до прелистувачот.

Односно, ќе имаме следнава датотечна структура:

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

Да сместиме во нашата датотека data.js некоја низа со податоци:

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

Да ја направиме страницата page.jsx:

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

Да ја поврземе со нашата страница низата со податоци:

import data from './data.js';

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

Да ги прикажеме овие податоци во циклус:

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

Нека е дадена следнава низа на постови:

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

Прикажете ги овие продукти во форма на листа ul.

Нека е дадена следнава низа со продукти:

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

Прикажете ги овие продукти во форма на HTML табела.