NextJS တွင် ဒေတာများ တင်သွင်းခြင်း

NextJS တွင် ကျွန်ုပ်တို့သည် မည်သည့် ဖိုင်များကိုမဆို တင်သွင်း (import) ခြင်း၊ တင်ပို့ (export) ခြင်းများ လုပ်ဆောင်နိုင်ပါသည်။ ၎င်းသည် သင် ES6 modules များဖြင့် အလုပ်လုပ်ဖူးပါက သိပြီးသား ဖြစ်မည်။ ယခုလည်း NextJS တွင် အလုပ်လုပ်မည်ဖြစ်သော်လည်း၊ အသစ်စက်စက်များအတွက် သိသာထင်ရှားမှု မရှိပါ။ ထို့ကြောင့် import များအကြောင်း ဆွေးနွေးကြပါစို့။

ဥပမာအနေဖြင့် ကျွန်ုပ်တို့တွင် စာမျက်နှာ တစ်ခုရှိသည်ဟု ဆိုကြပါစို့။ ထိုစာမျက်နှာပေါ်တွင် ဒေတာအချို့ကို ဖော်ပြလိုပါသည်။ ဥပမာ၊ ကျွန်ုပ်တို့တွင် ဒေတာအချို့ ပါဝင်သည့် array တစ်ခု ရှိသည်ဟု ဆိုကြပါစို့။ ထိုဒေတာများသည် အလွန်ကြီးမားသဖြင့် ၎င်းတို့ကို သီးသန့်ဖိုင် တစ်ခုထဲသို့ ထုတ်ထားရန် သင့်တော်သည်ဟု ထင်မြင်ပါသည်။

ထိုဖိုင်အမည်သည် မည်သည့်အမည်မဆို ဖြစ်နိုင်ပါသည်။ data.js ဟု ဆိုကြပါစို့။ ထိုဖိုင်ထဲတွင် ဒေတာများပါဝင်သည့် array တစ်ခုကို ထည့်ပါမည်။ page.jsx ဖိုင်ထဲတွင် NextJS ကိုယ်တိုင် လုပ်ဆောင်ကာ browser သို့ ပို့ဆောင်ပေးမည့် စာမျက်နှာ ရှိပါမည်။

ဆိုလိုသည်မှာ ကျွန်ုပ်တို့တွင် အောက်ပါဖိုင် တည်ဆောက်ပုံ ရှိပါမည်။

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

ကျွန်ုပ်တို့၏ data.js ဖိုင်ထဲတွင် ဒေတာအချို့ ပါဝင်သည့် array တစ်ခုကို ထားရှိပါမည်။

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

ကျွန်ုပ်တို့၏ စာမျက်နှာသို့ ဒေတာများ ပါဝင်သည့် array ကို ချိတ်ဆက်ပါမည်။

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

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

ထိုဒေတာများကို loop ဖြင့် ဖော်ပြပါမည်။

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