NextJS ဖရိမ်ဝပ်တွင် အက်ပ်များ၏ အတွင်းပိုင်းလက်ရာများကို စစ်ဆေးခြင်း

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် အစိတ်အပိုင်းနှစ်မျိုး - ဆာဗာဘက်အစိတ်အပိုင်းများနှင့် ကလိုင်းယင့်ဘက်အစိတ်အပိုင်းများကို ပြုလုပ်ရန်ကြိုးစားခဲ့ကြသည်။ ဆာဗာဘက်အစိတ်အပိုင်းများတွင် SEO ပြဿနာကို ဖြေရှင်းပြီးဖြစ်ကြောင်း သေချာအောင်လုပ်ကြည့်ကြပါစို့။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏အစိတ်အပိုင်း၏ စာသားများပါရှိသော HTML ကုဒ်များက ဘရောက်ဆာသို့ရောက်ရှိလာခြင်း ရှိ၊မရှိ စစ်ဆေးသင့်ပါသည်။ ထိုသို့လုပ်ဆောင်ကြည့်ပါမည်။

ကျွန်ုပ်တို့၏ ဆာဗာဘက်အစိတ်အပိုင်းသည် အောက်ပါပုံစံအတိုင်းရှိသည်ဟု ယူဆပါစို့။

src/app/test/page.jsxexport default function Test() {
  let name = 'user';
  return <h1>hello, {name}!</h1>;
}

ဘရောက်ဆာထဲတွင် ဤအစိတ်အပိုင်းပါဝင်သည့် စာမျက်နှာကိုဖွင့်ပါ။ ထို့နောက် Ctrl + U ကိုနှိပ်ပါ။ ဤသည် ကီးဘုတ်အကြီးစာတွဲတစ်ခုဖြစ်ပြီး စာမျက်နှာ၏ မူရင်း HTML ကုဒ်ကိုဖွင့်ပေးမည်။ ဤကုဒ်သည် ဆာဗာမှရောက်ရှိလာသောကုဒ်ဖြစ်သည်။ ဆိုလိုသည်မှာ ဘရောက်ဆာ၏ JavaScript ဖြင့် မပြုပြင်မီ မူရင်းပုံစံဖြစ်သည်။ ကျွန်ုပ်တို့၏ စာမျက်နှာကို ရှာဖွေရေးအင်ဂျင်များသည် ဤကဲ့သို့သော ပုံစံဖြင့်သာ မြင်တွေ့ရသည်။ ထို့ကြောင့် မူရင်းကုဒ်ကိုဖွင့်ပြီး လေ့လာပါ။ ကျွန်ုပ်တို့၏ အစိတ်အပိုင်း၏စာသားများကို ထိုတွင်တွေ့ရှိရမည်။

နမူနာအနေဖြင့် ယခုအခါ ကလိုင်းယင့်ဘက် အစိတ်အပိုင်းတစ်ခုကို ပြုလုပ်ကြည့်ပါမည်။

src/app/test/page.jsx'use client';

import { useState } from 'react';

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

ထပ်မံ၍ Ctrl + U ကိုနှိပ်ပြီး မူရင်းကုဒ်ကို လေ့လာပါ။ ကျွန်ုပ်တို့၏ အစိတ်အပိုင်း၏စာသားကို သင်ရှာတွေ့မည်မဟုတ်ပါ။ အဘယ်ကြောင့်ဆိုသော် ၎င်း၏စာသားကို ဘရောက်ဆာအတွင်း ဒိုင်းနမစ်အလိုက် ဖွဲ့စည်းထားသောကြောင့် ဖြစ်သည်။

ဆာဗာဘက်နှင့် ကလိုင်းယင့်ဘက် အစိတ်အပိုင်းများအကြား အဓိကကွာခြားချက်သည် ဤနေရာတွင်ပေါ်လွင်သည်။