NextJS တွင် Component များ Import လုပ်ခြင်း

ဒေတာဖိုင်များကိုသာမက Component များကိုလည်း ပုံမှန် React တွင်အလုပ်လုပ်သည့်အခါကျွန်ုပ်တို့အသုံးပြုသည့် နည်းလမ်းအတိုင်း Import လုပ်နိုင်ပါသည်။ ထိုသို့အလုပ်လုပ်ပုံကိုကြည့်ရအောင်။

အစောပိုင်းတွင်သဘောတူညီချက်အချို့သတ်မှတ်ပါမည်။ သင်သိပြီးဖြစ်သည့်အတိုင်း src/app ဖိုလ်ဒါအတွင်းတွင် ဝဘ်ဆိုက်၏စာမျက်နှာများကိုထားရှိပါသည်။ ခွဲထွက် Component များကို src/comp ဖိုလ်ဒါအတွင်းထားရှိကြပါစို့။

ယခု ခွဲထွက် Component ကို စာမျက်နှာတစ်ခုခုနှင့်ချိတ်ဆက်ကြည့်ပါမည်။ ကျွန်ုပ်တို့တွင် ဤကဲ့သို့ စာမျက်နှာရှိသည်ဆိုပါစို့:

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

ကျွန်ုပ်တို့တွင် အောက်ပါ ခွဲထွက် Component ရှိသည်ဆိုပါစို့:

src/comp/child/child.jsxexport default function Child() {
  return <p>
    child
  </p>;
}

ကျွန်ုပ်တို့၏ခွဲထွက် Component ကို ကျွန်ုပ်တို့၏စာမျက်နှာသို့ Import လုပ်ပါမည်:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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

Import လုပ်ထားသော Component ကိုထည့်သွင်းပါမည်။ ဤအတွက် Component ၏ variable အမည်ဖြင့် tag ကိုအသုံးပြုပါမည်:

src/app/test/page.jsximport Child from '@/comp/child/child.jsx';

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