NextJS-də məlumatların import edilməsi

NextJS-də biz istənilən faylları import və export edə bilərik. Bunu siz artıq bacarmalısınız, əgər ES6 modulları ilə işləmisinizsə. Məntiqlidir ki, bu NextJS-də də işləyəcək, amma yeni başlayanlar üçün bu həmişə aydın olmur. Ona görə də gəlin importlar haqqında danışaq.

Nümunə üçün tutaq ki, bizim müəyyən bir səhifəmiz var. Bu səhifədə biz bəzi məlumatları çıxarmaq istəyirik. Tutaq ki, bizdə məlumatlarla dolu bir sıra var. Tutaq ki, bu məlumatlar elə böyükdür ki, onları ayrı bir fayla çıxarmaq məqsədəuyğun görünür.

Bu faylın adı istənilən ola bilər. Tutaq ki, data.js olacaq. Bu faylda biz məlumat massivini yerləşdirəcəyik. page.jsx faylında isə bizim NextJS tərəfindən emal ediləcək və brauzerə göndəriləcək səhifəmiz olacaq.

Yəni bizim aşağıdakı fayl quruluşumuz olacaq:

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

Gəlin data.js faylımızda məlumatlarla dolu bir massiv yerləşdirək:

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

Gəlin page.jsx səhifəsini yaradaq:

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

Gəlin səhifəmizə məlumat massivini qoşaq:

import data from './data.js';

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

Gəlin bu məlumatları dövrədə çıxaraq:

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

Tutaq ki, aşağıdakı postlar massivi verilib:

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

Bu məhsulları ul siyahısı şəklində çıxarın.

Tutaq ki, aşağıdakı məhsullar massivi verilib:

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

Bu məhsulları HTML cədvəli şəklində çıxarın.