Ma'lumotlarni NextJS da Import Qilish

NextJS da biz ixtiyoriy fayllarni import va export qilishimiz mumkin. Buni siz bilishingiz kerak, agar siz ES6 modullari bilan ishlagan bo'lsangiz. Mantiqan, bu NextJS da ham ishlaydi, lekin yangi boshlanuvchilar uchun bu har doim ham aniq emas. Shuning uchun keling, importlar haqida gaplashaylik.

Misol uchun, bizda ma'lum bir sahifa bor. Ushbu sahifada biz ba'zi ma'lumotlarni chiqarmoqchimiz. Misol uchun, bizda ma'lum bir ma'lumotlar massivi bor. Faraz qilaylik, bu ma'lumotlar shunchalik katta, unki ularni alohida faylga chiqarish qulay deb hisoblaymiz.

Ushbu faylning nomi ixtiyoriy bo'lishi mumkin. Faraz qilaylik, data.js. Ushbu faylda biz ma'lumotlar massivini joylashtiramiz. page.jsx faylida esa bizda NextJS tomonidan qayta ishlanadigan va brauzerga uzatiladigan sahifa bo'ladi.

Ya'ni bizda quyidagi fayl tuzilishi bo'ladi:

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

Keling, data.js faylimizga ma'lum bir ma'lumotlar massivini joylashtiramiz:

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

Keling, page.jsx sahifasini yaratamiz:

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

Keling, sahifamizga ma'lumotlar massivini ulaymiz:

import data from './data.js';

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

Keling, bu ma'lumotlarni tsiklda chiqaramiz:

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

Quyidagi postlar massivi berilgan:

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

Ushbu postlarni ul ro'yxati ko'rinishida chiqaring.

Quyidagi mahsulotlar massivi berilgan:

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

Ushbu mahsulotlarni HTML jadval ko'rinishida chiqaring.