NextJS ဖရိမ်ဝပ်ခ်တွင် Client Components များ

ယခု ကျွန်ုပ်တို့၏ server component ကို client component အဖြစ် ပြန်လည်ပြောင်းလဲကြပါစို့။ ဤအတွက် component ဖိုင်အစတွင် 'use client' ညွှန်ကြားချက်ကို ရေးသားပါမည်။

'use client';

export default function Test() {
	return <h1>hello, user!</h1>;
}

ယခု useState မှတစ်ဆင့် ဖန်တီးထားသော state များကို အသုံးပြုနိုင်မည်ဖြစ်သည်။ နမူနာအနေဖြင့် state တစ်ခုဖန်တီးပြီး ၎င်း၏ပါဝင်မှုများကို markup တွင်ထုတ်ပြကြည့်ရအောင်။

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

input နှစ်ခုနှင့် button တစ်ခုပါရှိသော client component တစ်ခုကို ပြုလုပ်ပါ။ input များတွင် ဂဏန်းများကို ရိုက်ထည့်နိုင်ပါစေ။ button ကိုနှိပ်ပါက ရိုက်ထည့်ထားသော ဂဏန်းများ၏ ပေါင်းလဒ်ကို paragraph တစ်ခုတွင် ထုတ်ပြပါ။

'use client' ညွှန်ကြားချက်ကို ဖယ်ရှားပါ။ ဤအခြေအနေတွင် server component များအတွင်း state များကို အသုံးမပြုနိုင်သည့် အကြောင်းပြချက်ကြောင့် NextJS က error တစ်ခုထုတ်ပေးမည်ကို သေချာစေပါ။