NextJSда маълумотларни импорт қилиш

NextJSда биз турли файлларни импорт ва экспорт қила оламиз. Бу сизга маълум бўлиши керак, агар сиз ES6 модуллари билан ишлаган бўлсангиз. Маълумки, бу NextJSда ҳам ишлайди, лекин янги бошланувчиларга бу ҳамеша аник бўла бермайди. Шунинг учун импортлар ҳақида гаplashaylik.

Мисол учун бизнинг бирор саҳифамиз бўлсин. Бу саҳифада биз маълумотларни чиқармоқчимиз. Масалан, бизда маълумотлар билан бирор массив бўлсин. Ушбу маълумотлар жуда катта бўлиб, уни алохида файлга чиқариб қўйиш қулайрок ҳисобланади.

Бу файлнинг номи исталганча бўлиши мумкин. data.js деб атайлик. Бу файлда биз маълумотлар билан массивни жойлаштирамиз. page.jsx файлида эса NextJS томонидан ишлов бериладиган ва браузерга юбориладиган саҳифа бўлади.

Яъни бизда куйидаги файл структураси бўлади:

• /src//app//test/page.jsxdata.js

data.js файлимизга маълумотлар билан бирор массивни жойлаштирамиз:

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

page.jsx саҳифасини яратамиз:

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

Саҳифамизга маълумотлар массивини улаймиз:

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

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

Ушбу маълумотларни циклда чиқарайлик:

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,
  },
];