Next.js App ကို Vercel သို့ Production Deploy လုပ်နည်း

Local မှာအလုပ်လုပ်နေတဲ့ Next.js project ကို GitHub ချိတ်ပြီး environment variables၊ build စစ်ဆေးမှုနှင့် custom domain အဆင့်အထိ production တင်ပါမယ်။

Problem

Development server မှာအဆင်ပြေပေမယ့် production deployment လုပ်ချိန်မှာ build error၊ environment variable ပျောက်ခြင်းနှင့် domain configuration မှားခြင်းများ ဖြစ်တတ်ပါတယ်။

Requirements

Node.js 20 နှင့် pnpm သို့မဟုတ် npm
GitHub account နှင့် Vercel account
Local မှာ build အောင်မြင်သော Next.js project

Production build ကို local မှာစစ်ပါ

Deploy ခလုတ်မနှိပ်မီ production build ကို ကိုယ့်စက်မှာအရင်စမ်းပါ။ Type error နဲ့ missing environment variable ကို ဒီအဆင့်မှာတွေ့ရင် ပြန်ပြင်ရတာ ပိုမြန်ပါတယ်။

Terminal

$ pnpm install
$ pnpm lint
$ pnpm typecheck
$ pnpm build

Repository ကို GitHub သို့တင်ပါ

.env.local၊ API keys နဲ့ build output တွေ commit မဝင်ကြောင်း .gitignore ကိုစစ်ပါ။ ပြီးမှ သီးခြား branch တစ်ခုကနေ commit လုပ်ပြီး GitHub သို့ push ပါ။

Terminal

$ git status
$ git add .
$ git commit -m "Prepare production deployment"
$ git push origin main

Vercel project နှင့် environment ချိတ်ပါ

Vercel dashboard မှာ Add New Project ကိုရွေးပြီး repository ကို import လုပ်ပါ။ Framework preset ကို Next.js အဖြစ်ထားပြီး secret တန်ဖိုးတွေကို Project Settings > Environment Variables ထဲမှာ Production၊ Preview၊ Development အလိုက်ခွဲထည့်ပါ။

Secret ကို browser မပို့ပါနှင့်

NEXT_PUBLIC_ prefix ပါတဲ့ variable ကို browser ကမြင်နိုင်ပါတယ်။ API secret တွေမှာ ဒီ prefix မသုံးပါနဲ့။

Deployment ကို smoke test လုပ်ပါ

Deployment URL ဖွင့်ပြီး home page တစ်ခုတည်းမကြည့်ပါနဲ့။ Navigation၊ form၊ API route၊ 404 page၊ mobile layout နဲ့ metadata ကို စစ်ပါ။ Vercel logs မှာ runtime error မရှိကြောင်းလည်းကြည့်ပါ။

Production URL သည် HTTPS ဖြင့်ဖွင့်နိုင်သည်
အဓိက routes နှင့် API endpoints အလုပ်လုပ်သည်
Secrets များ client bundle ထဲမပါ
Preview deployment နှင့် production deployment ခွဲထားသည်

Expected result

GitHub push တိုင်း build စစ်ဆေးပြီး production URL မှာ HTTPS ဖြင့်သုံးနိုင်သော Next.js app တစ်ခု ရရှိပါမယ်။

Troubleshooting

Build error ဖြစ်လျှင် Vercel Build Logs ရဲ့ ပထမဆုံး error ကိုအရင်ဖြေရှင်းပါ။
Environment variable ပြောင်းပြီးပါက redeploy လုပ်မှ deployment အသစ်မှာသက်ရောက်ပါမယ်။
Monorepo ဖြစ်လျှင် Root Directory နှင့် build command ကိုမှန်အောင်သတ်မှတ်ပါ။