Kuingiza Data kwenye NextJS

Katika NextJS tunaweza kufanya kuingiza na kutohariri faili za kiholela. Hii unapaswa kuwa tayari unajua, ikiwa umefanya kazi na ES6 moduli. Ni mantiki kwamba hii itafanya kazi pia katika NextJS, lakini wanaoanza sio wakati wote wanaona wazi. Kwa hivyo hebu tuzungumze juu ya kuingiza.

Kwa mfano tuwe na ukurasa fulani. Kwenye ukurasa huu tunataka kuonyesha data fulani. Hebu, kwa mfano, tuwe na safu fulani yenye data. Hebu data hii iwe kubwa sana, kwa hivyo tunaona ni rahisi kuiweka kwenye faili tofauti.

Jina la faili hili linaweza kuwa lolote. Hebu iwe data.js. Kwenye faili hii tutaweka safu yenye data. Na kwenye faili page.jsx tutakuwa na ukurasa ambao utakayotayarishwa na NextJS yenyewe na kutolewa kwenye kivinjari.

Hii ina maana tutakuwa na muundo wa faili ufuatayo:

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

Tuweke kwenye faili yetu data.js safu fulani yenye data:

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

Tutengeneze ukurasa page.jsx:

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

Tutaunganisha kwenye ukurasa wetu safu yenye data:

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

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

Tuonyeshe data hii kwa kutumia kitanzi:

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