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

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

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

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

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

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

export default function Child() {
	return <p>
		child
	</p>;
}

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

import Child from '@/comp/child/child.jsx';

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

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

import Child from '@/comp/child/child.jsx';

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

ခွဲထွက် Component များစွာဖန်တီးပါ။ သင်၏စာမျက်နှာများသို့ ၎င်းတို့ကို Import လုပ်ပါ။