Project စတင်ခြင်းနှင့် Development Server

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Development environment ကို စစ်ဆေးရန်
create-next-app ဖြင့် project ဖန်တီးရန်
Development server ကို run တတ်ရန်

Framework လေ့လာတဲ့အခါ setup မှာပဲ error တက်ရင် စိတ်ပျက်လွယ်ပါတယ်။ အရင်ဆုံး Node.js version ကို စစ်ပြီး command တစ်ကြောင်းချင်းစီကို ဘာလုပ်တာလဲ သိထားရင် ပြဿနာဖြေရှင်းရ ပိုလွယ်ပါတယ်။ လက်ရှိ Next.js documentation အရ Node.js 20.9 သို့မဟုတ် ထို့ထက်မြင့်တာ လိုအပ်ပါတယ်။

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

create-next-app က TypeScript၊ ESLint၊ Tailwind CSS၊ App Router နဲ့ import alias တို့ကို အဆင်သင့်ထည့်ပေးတဲ့ official scaffolding tool ဖြစ်ပါတယ်။ --yes သုံးရင် recommended defaults နဲ့ တန်းဖန်တီးပေးပါတယ်။ pnpm မရှိရင် npm create next-app@latest ကို အစားထိုးသုံးနိုင်ပါတယ်။ Development server က source ပြောင်းတာကို စောင့်ကြည့်ပြီး browser ကို ချက်ချင်းပြန်တင်ပေးပါတယ်။

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

bash

node --version
pnpm create next-app@latest myanmar-notes --yes
cd myanmar-notes
pnpm dev

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

node --version က runtime ရှိမရှိ စစ်ပါတယ်။ Project ဖန်တီးပြီးနောက် cd နဲ့ folder ထဲဝင်ကာ pnpm dev လုပ်ပါ။ Terminal မှာ Local URL ပေါ်လာမှ browser နဲ့ဖွင့်ပါ။ Server ကိုရပ်ချင်ရင် Ctrl+C နှိပ်ပါ။

You should see

Terminal တွင် Local: http://localhost:3000 ပေါ်လာပြီး starter page ကို browser မှာ မြင်ရမည်။

၅ မိနစ် စမ်းကြည့်

Project ကိုဖန်တီးပြီး app/page.tsx ထဲက heading ကို “Myanmar Notes” ဟု ပြောင်းပါ။ Browser က reload မလုပ်ဘဲ ပြောင်းသွားတာကို ကြည့်ပါ။

Next.js — Installation — Next.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Node.js version အဟောင်းဖြင့် install လုပ်ခြင်း
Project folder အပြင်ဘက်မှာ pnpm dev လုပ်ခြင်း

လေ့ကျင့်ခန်း

You'll know it worked when: Terminal တွင် Local: http://localhost:3000 ပေါ်လာပြီး starter page ကို browser မှာ မြင်ရမည်။