บทความ เรื่องราว ความรู้ และประสบการณ์จากการสร้างเว็บไซต์และ Web Application
Deploy Next.js บน Vercel พร้อมเชื่อมโดเมน | KittiStack
Next.js & Frontend Deploy Next.js บน Vercel พร้อมเชื่อมโดเมน Deploy Next.js บน Vercel ใน 4 ขั้น ตั้งแต่ GitHub, Environment Variables จนเชื่อมโดเมน พร้อมวิธีแก้ build พัง env ไม่อัปเดต และ deploy ขึ้น BLOCKED
Kittipong C.
ทีมงาน KittiStack
October 26, 2026 · 5 min read
Deploy Next.js บน Vercel ทีละขั้น ตั้งแต่ GitHub จนใช้โดเมนของตัวเอง (2026) Deploy Next.js บน Vercel ทำได้ใน 4 ขั้น ข้อแรก push โค้ดขึ้น GitHub ข้อสอง import repo เข้า Vercel ข้อสามใส่ Environment Variables ข้อสุดท้ายเชื่อมโดเมนด้วย A record กับ CNAME หลังจากนั้นทุกครั้งที่ push ขึ้น branch หลัก เว็บจะอัปเดตเอง ส่วน branch อื่นจะได้ลิงก์ preview แยกไว้ทดสอบ
บทความนี้เขียนจากการ deploy เว็บ KittiStack และเว็บลูกค้าบน Vercel ด้านล่างจึงรวมจุดที่ทำให้ deploy พังบ่อย ซึ่งคู่มือทั่วไปมักไม่พูดถึงด้วย เช่น ตัวแปร env ที่เปลี่ยนแล้วไม่มีผล และ deploy ที่ขึ้น BLOCKED บนแพ็กเกจ Hobby ถ้ายังไม่ได้เลือกแพ็กเกจ อ่าน บทความ Vercel ราคา Hobby กับ Pro ประกอบได้
ก่อนเริ่ม: เช็กว่าโปรเจกต์ build ผ่านในเครื่อง Vercel build โปรเจกต์ด้วยคำสั่งเดียวกับที่เรารันในเครื่อง ถ้าในเครื่องยัง build ไม่ผ่าน บน Vercel ก็ไม่ผ่าน ลองรันก่อน:
ถ้ายังไม่มีโปรเจกต์ สร้างใหม่ได้ด้วย npx create-next-app@latest ถ้ายังไม่คุ้นกับ Next.js อ่าน คู่มือ Next.js เบื้องต้น ก่อน
เช็กอีกเรื่องคือไฟล์ .gitignore
#Next.js #Vercel #Deploy #โดเมน
ต้องมี
.env*.local
อยู่ ไม่อย่างนั้นรหัสลับในไฟล์ env จะหลุดขึ้น GitHub ไปด้วย
ขั้นที่ 1: push โค้ดขึ้น GitHub git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ชื่อบัญชี/ชื่อโปรเจกต์.git
git push -u origin main
ถ้าใช้แพ็กเกจ Hobby และ repo เป็นแบบ private ให้เช็กว่าอีเมลใน git config user.email ตรงกับบัญชี GitHub ที่จะเชื่อมกับ Vercel ไม่อย่างนั้น deploy จะขึ้น BLOCKED (รายละเอียดอยู่ในหัวข้อปัญหาที่เจอบ่อยด้านล่าง)
ขั้นที่ 2: import โปรเจกต์เข้า Vercel 1. ล็อกอิน Vercel ด้วยบัญชี GitHub 2. กด Add New → Project แล้วเลือก repo ที่เพิ่ง push 3. Vercel จะตรวจเจอว่าเป็น Next.js เอง ไม่ต้องแก้ Build Command หรือ Output Directory 4. ถ้าโปรเจกต์อยู่ในโฟลเดอร์ย่อยของ repo ให้ตั้ง Root Directory ให้ชี้ไปที่โฟลเดอร์นั้น 5. ใส่ Environment Variables ในหน้าเดียวกันนี้ก่อนกด Deploy (ดูขั้นที่ 3) 6. กด Deploy รอ 1–3 นาที จะได้ลิงก์ ชื่อโปรเจกต์.vercel.appหลังจากนี้ Vercel จะ deploy ให้อัตโนมัติ push เข้า main จะขึ้น production ส่วน push เข้า branch อื่นหรือเปิด Pull Request จะได้ลิงก์ preview แยก ใช้ส่งให้ลูกค้าดูงานก่อนขึ้นจริงได้
ขั้นที่ 3: ใส่ Environment Variables ให้ถูก ไปที่ Settings → Environment Variables ของโปรเจกต์ แล้วใส่ค่าเดียวกับใน .env.local เช่น ถ้าใช้ Supabase:
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_...
SUPABASE_SECRET_KEY=sb_secret_...
มีสามเรื่องที่ทำให้คนพลาดบ่อย
ตัวแปรที่ขึ้นต้นด้วย NEXT_PUBLIC_ ถูกฝังลงโค้ดตอน build แก้ค่าในหน้าตั้งค่าแล้วเว็บจะยังใช้ค่าเดิม จนกว่าจะ deploy ใหม่ ให้ไปที่แท็บ Deployments แล้วกด Redeploy ที่ deployment ล่าสุด
อย่าใส่ NEXT_PUBLIC_ ให้ค่าที่เป็นความลับ เช่น service role key ของ Supabase หรือ API key ที่มีค่าใช้จ่าย ตัวแปรที่มีคำนี้นำหน้าจะถูกส่งไปที่เบราว์เซอร์ ใครก็เปิดดูได้
เลือก Environment ให้ครบ แต่ละตัวแปรเลือกได้ว่าใช้กับ Production, Preview หรือ Development ถ้าลืมติ๊ก Preview ลิงก์ preview จะพังทั้งที่ production ใช้ได้ บางกรณีควรให้ Preview ใช้ฐานข้อมูลทดสอบแยกจาก Production
ขั้นที่ 4: เชื่อมโดเมนของตัวเอง ไปที่ Settings → Domains ใส่ชื่อโดเมน เช่น example.com Vercel จะแนะนำให้เพิ่ม www.example.com ไปพร้อมกัน และตั้งให้ตัวหนึ่ง redirect ไปอีกตัว
จากนั้นไปตั้ง DNS ที่ผู้ให้บริการโดเมน ค่าที่ใช้กันทั่วไปตาม เอกสารของ Vercel คือ
ใช้ค่าที่ขึ้นในการ์ดโดเมนของโปรเจกต์เป็นหลัก เพราะบางโปรเจกต์ได้ค่าเฉพาะ ก่อนเพิ่มให้ลบ A record เดิมที่ชี้ไปโฮสต์เก่าออกก่อน ถ้าค้างไว้ Vercel จะยืนยันโดเมนไม่ผ่าน และ คู่มือของ Vercel ยังเตือนว่าอย่าทิ้ง AAAA record ที่ชี้ไปที่อื่นไว้ เพราะ Vercel ไม่รองรับ IPv6 สำหรับโดเมนที่ใช้ DNS ภายนอก
ทางเลือก: ย้าย nameserver มาที่ Vercel ง่ายกว่าเพราะ Vercel จัดการ DNS ให้ทั้งหมด แต่ระเบียนอื่นที่มีอยู่ เช่น MX ของอีเมลบริษัท ต้องย้ายมาตั้งใหม่ที่ Vercel ด้วย ถ้าใช้อีเมลกับโดเมนนี้อยู่แล้ว ใช้วิธี A กับ CNAME จะปลอดภัยกว่า
เมื่อ DNS ทำงานแล้ว การ์ดโดเมนจะขึ้น Valid Configuration และ Vercel ออกใบรับรอง SSL ให้อัตโนมัติ โดยทั่วไปใช้เวลาไม่กี่นาทีถึงไม่กี่ชั่วโมง ขึ้นกับค่า TTL ของระเบียนเดิม
ตั้งค่าเพิ่มที่ควรทำหลัง deploy เลือก Function Region ให้ใกล้ผู้ใช้และฐานข้อมูล ค่าเริ่มต้นมักเป็นสหรัฐฯ ถ้าผู้ใช้อยู่ไทยและฐานข้อมูล Supabase อยู่สิงคโปร์ ให้ตั้งเป็นสิงคโปร์ (sin1) ใน Settings ของโปรเจกต์ หน้าที่ดึงข้อมูลจากฐานข้อมูลจะตอบเร็วขึ้นชัดเจน
ส่ง sitemap ใน Google Search Console หลังเชื่อมโดเมนแล้ว ยืนยันเว็บใน Search Console และส่ง /sitemap.xml วิธีสร้าง sitemap ใน Next.js อยู่ใน บทความ Next.js SEO
เช็ก Deployment Protection ลิงก์ preview อาจถูกตั้งให้ต้องล็อกอิน Vercel ก่อนดู ถ้าจะส่งลิงก์ preview ให้ลูกค้า ให้ตั้งค่าที่ Settings → Deployment Protection หรือส่งลิงก์แชร์ที่ Vercel สร้างให้
ตั้งแจ้งเตือนเมื่อ deploy ล้มเหลว เชื่อม Vercel กับอีเมล Slack หรือ GitHub เพื่อให้รู้ทันทีเมื่อ build พัง
ปัญหาที่เจอบ่อยตอน Deploy Next.js บน Vercel Build ผ่านในเครื่อง แต่พังบน Vercel สาเหตุที่เจอบ่อยคือขาดตัวแปร env ตอน build, ชื่อไฟล์ตัวพิมพ์เล็กใหญ่ไม่ตรงกับที่ import (macOS ไม่สนตัวพิมพ์ แต่ Linux บน Vercel สน) และ Node.js ในเครื่องเป็นคนละเวอร์ชันกับบน Vercel ให้เปิด Build Logs ของ deployment นั้นดูบรรทัด error แรก
Deploy ขึ้น BLOCKED ทั้งที่ทำงานคนเดียว บนแพ็กเกจ Hobby กับ repo แบบ private ผู้เขียน commit ต้องเป็นเจ้าของบัญชีเท่านั้น เว็บ KittiStack เคยเจอเอง commit แก้โค้ดถูกบล็อก แต่ commit ที่แก้ README ผ่านหน้าเว็บ GitHub กลับ deploy ผ่าน เช็กด้วย git log -1 --format='%an <%ae>%n%b' ว่าอีเมลตรงไหม และมีบรรทัด Co-Authored-By จากเครื่องมือ AI ติดมาหรือเปล่า ถ้าใช้ Claude Code ปิดบรรทัดนี้ได้ ดูวิธีใน บทความ Claude Code คืออะไร
แก้ env แล้วเว็บไม่เปลี่ยน ต้อง Redeploy หลังแก้ตัวแปรทุกครั้ง โดยเฉพาะตัวที่ขึ้นต้นด้วย NEXT_PUBLIC_
โดเมนค้างที่ Invalid Configuration เช็กว่าลบ A record เก่าแล้ว ไม่มี AAAA ที่ชี้ไปที่อื่น และถ้าใช้ Cloudflare ให้ปิด proxy (เมฆสีส้ม) ชั่วคราวจนกว่า Vercel จะออก SSL ได้ ถ้าทุกอย่างถูกแต่ยังค้าง ลองลบโดเมนออกจากโปรเจกต์แล้วเพิ่มใหม่
เว็บหยุดทำงานกลางเดือน ถ้าอยู่บน Hobby อาจใช้โควตา Active CPU หมด เช็กที่หน้า Usage ของทีม รายละเอียดอยู่ในบทความ Vercel ราคา
คำถามที่พบบ่อย ฟรีบนแพ็กเกจ Hobby สำหรับเว็บส่วนตัวที่ไม่ใช่เชิงพาณิชย์ ถ้าเป็นเว็บธุรกิจหรือเว็บลูกค้า ต้องใช้แพ็กเกจ Pro ค่าโดเมนจ่ายแยกกับผู้ให้บริการโดเมน
ได้ โดเมนจากผู้ให้บริการไหนก็ใช้ได้ ขอแค่เข้าไปตั้ง A record และ CNAME ในหน้าจัดการ DNS ได้
ไม่จำเป็น Vercel รองรับ GitLab และ Bitbucket ด้วย หรือจะ deploy จากเครื่องด้วยคำสั่ง vercel ของ Vercel CLI ก็ได้ แต่การเชื่อมกับ Git ทำให้ได้ deploy อัตโนมัติและลิงก์ preview ต่อ branch
ได้ ไปที่แท็บ Deployments เลือก deployment เก่าที่ทำงานดี แล้วเลือก Promote to Production หรือ Instant Rollback เว็บจะกลับไปเป็นเวอร์ชันนั้นทันทีโดยไม่ต้อง build ใหม่
ได้ Next.js รันได้บนโฮสต์ที่รองรับ Node.js หรือ Docker และ export เป็นเว็บ static ได้ถ้าไม่ใช้ฟีเจอร์ฝั่ง server แต่ Vercel ตั้งค่าน้อยที่สุดเพราะเป็นผู้พัฒนา Next.js เอง
สรุป ถ้าโปรเจกต์ build ผ่านในเครื่อง ขั้นตอน import เข้า Vercel ใช้เวลาไม่ถึง 10 นาที ส่วนที่ต้องใส่ใจจริงคือ Environment Variables กับ DNS ใส่ env ให้ครบทุก Environment อย่าใส่ NEXT_PUBLIC_ ให้ค่าลับ redeploy ทุกครั้งที่แก้ และลบ DNS เก่าก่อนเพิ่มของ Vercel หลังจากนั้นค่อยตั้ง region กับส่ง sitemap ให้ Google
ถ้าอยากให้ช่วย deploy หรือย้ายเว็บ Next.js มาที่ Vercel พร้อมตั้งค่าโดเมน region และ SEO ให้ครบ ดูรายละเอียดได้ที่ บริการทำเว็บไซต์บริษัท
