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.jsxdata.js

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

src/app/test/data.jsexport default [
  1, 2, 3, 4, 5,
];

Keling, page.jsx sahifasini yaratamiz:

src/app/test/page.jsxexport default function Test() {
  return <h1>Test</h1>;
}

Keling, sahifamizga ma'lumotlar massivini ulaymiz:

src/app/test/page.jsximport data from './data.js';

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

Keling, bu ma'lumotlarni tsiklda chiqaramiz:

src/app/test/page.jsximport 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>
  </>;
}

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

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