Next.js ဆိုတာဘာလဲ

React နဲ့ button၊ card၊ form တို့လို UI အပိုင်းတွေကို တည်ဆောက်နိုင်ပါတယ်။ ဒါပေမယ့် website တစ်ခုလုံးအတွက် URL route ဘယ်လိုခွဲမလဲ၊ server မှာ data ဘယ်လိုယူမလဲ၊ search engine ဖတ်နိုင်အောင် ဘယ်လို render မလဲဆိုတာတွေကို ကိုယ်တိုင်စီစဉ်ရပါတယ်။ Next.js က အဲဒီဆုံးဖြတ်ချက်တွေကို စနစ်တကျလုပ်နိုင်ဖို့ React ပေါ်မှာ framework တစ်လွှာ ထပ်ပေးထားတာပါ။

နားလည်ထားရမယ့် အချက်

App Router မှာ app folder အောက်က folder တွေက URL segment ဖြစ်လာပြီး page.tsx က စာမျက်နှာ၊ layout.tsx က မျှဝေသုံး UI ဖြစ်ပါတယ်။ Page နဲ့ Layout တွေဟာ ပုံမှန်အားဖြင့် Server Components ဖြစ်လို့ database သို့မဟုတ် API ကို server ဘက်ကနေ တိုက်ရိုက်ယူနိုင်ပါတယ်။ Click၊ state၊ browser API လို interactivity လိုတဲ့နေရာကိုသာ Client Component အဖြစ် ခွဲထုတ်ပါတယ်။ ဒီခွဲခြားမှုက browser ဆီပို့ရတဲ့ JavaScript ကို လျော့စေပါတယ်။

အတူတူ စမ်းရေးကြည့်မယ်

export default function HomePage() {
  return (
    <main>
      <h1>Myanmar Notes</h1>
      <p>မှတ်စုတွေကို လွယ်လွယ်ကူကူ သိမ်းထားမယ်။</p>
    </main>
  );
}

Code က ဘယ်လိုအလုပ်လုပ်သလဲ

အောက်က component မှာ hook မသုံးထားလို့ Server Component အဖြစ်နေပါတယ်။ JSX က React syntax ဖြစ်ပေမယ့် route တည်နေရာ၊ server rendering နဲ့ build optimization ကို Next.js က တာဝန်ယူပေးပါတယ်။

Home route တွင် Myanmar Notes heading နှင့် မိတ်ဆက်စာ ပေါ်လာမည်။

Next.js — Getting Started — Next.js