NextJS-da maglumatlary import etmek

NextJS-da biz islendik faýllary import we export edip bileris. Eger siz ES6 modullary bilen işleseňiz, buny edip bilmelisiňiz. Bu NextJS-de hem işleýär, ýöne täze gelýänler üçin bu her wagt aýdyň däl. Şonuň üçin importlar hakda gürleşeliň.

Mysal üçin diňe bir sahypamyz bar diýeliň. Bu sahypada käbir maglumatlary görkezmek isleýäris. Mysal üçin, bizde käbir maglumatlar toplumy bar diýeliň. Bu maglumatlar şeýle uly bolsun, olary aýratyn faýla çykarmak amatly diýip pikir edýäris.

Bu faýlyň ady islendik bolup biler. data.js bolsun. Bu faýlyň içinde biz maglumatlar toplumyny ýerleşdireris. page.jsx faýlynda bolsa NextJS tarapyndan işlenip, brauzere berilýän sahypa bolup durar.

Ýagny, bizde aşakdaky faýl gurluşy bolup durar:

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

data.js faýlymyzyň içine birnäçe maglumatlar toplumyny ýerleşdireliň:

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

page.jsx sahypasyny düzeliň:

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

Sahypamyza maglumatlar toplumyny birikdireliň:

import data from './data.js';

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

Bu maglumatlary aýlawda görkezeliň:

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

Aşakdaky postlar toplumy berlen:

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

Bu önümleri ul görnüşinde sanaw görkeziň.

Aşakdaky önümler toplumy berlen:

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

Bu önümleri HTML tablisasynyň görnüşinde görkeziň.