NextJS'те маалыматтарды импорттоо

NextJS'те биз каалаган файлдарды импорттоо жана экспорттоо ишин аткара алабыз. Бул сизге мурунтан эле тааныш болушу керек, эгерде сиз ES6 модулдары менен иштеген болсоңуз. Бул NextJS'те да иштей турганы логикалуу, бирок жаңы баштагандар үчүн бул ар дайым түшүнүктүү болбойт. Ошондуктан импорт жөнүндө сүйлөшөлү.

Мисал үчүн бизде кандайдыр бир баракча бар деп коёлу. Бул баракчада биз бир маалыматтарды чыгарышпыз келет. Мисалы, бизде кандайдыр бир маалыматтар массиви бар. Бул маалыматтар анчалык чоң болсун, аларды өзүнчө файлга чыгарып коюу ыңгайлуу көрүнөт.

Бул файлдын аты каалагандай болушу мүмкүн. Аны 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,
  },
];