Увоз података у 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 табеле.