Vibe Coding deploy บน Vercel — สอน Production ใน 1 ชั่วโมง

คุณเขียนโค้ดด้วย AI เสร็จแล้ว โปรเจครันใน localhost ได้แล้ว แต่ยังไม่รู้ว่าจะ deploy ขึ้น production ยังไง — นั่นคือปัญหาที่ Vibe Coder ส่วนใหญ่เจอหลังจากสร้างแอพสำเร็จ

บทความนี้จะพาคุณทำ vibe coding deploy บน Vercel ครบทุกขั้นตอน ตั้งแต่เตรียม GitHub repo ไปจนถึง custom domain + SSL — ทั้งหมดภายใน 1 ชั่วโมง

ถ้าคุณยังใหม่กับ Vibe Coding อยู่ แนะนำอ่าน Vibe Coding คืออะไร? และ Vibe Coding สำหรับผู้เริ่มต้น ก่อน แล้วค่อยมาต่อที่นี่

---

1. ทำไม Vercel คือ Best Partner สำหรับ Vibe Coder

เมื่อคุณ build แอพด้วย Cursor + Claude คุณมักจะได้ Next.js หรือ React ออกมาโดยอัตโนมัติ — และ Vercel คือบริษัทที่สร้าง Next.js นั่นเอง ทำให้การ deploy สนิทกันมากเป็นพิเศษ

ทำไม Vercel เหมาะกับ Vibe Coder?

Feature	Vercel	Netlify	Cloudflare Pages
Next.js support	Native (สร้างเอง)	ดี	ดี
Auto-detect framework	ใช่	ใช่	ใช่
Preview per PR	ใช่	ใช่	ใช่
Edge Functions	ครบ	จำกัด	ครบ
Speed Insights	Built-in	ไม่มี	ไม่มี
Free tier	Hobby (ฟรี)	Starter (ฟรี)	ฟรี
ตั้งค่าง่าย	ง่ายที่สุด	ง่าย	ง่าย

Vercel เป็น zero-config deploy สำหรับ Next.js ในความหมายที่แท้จริง — กด import แล้วมันรู้เองว่าต้อง build ยังไง รัน npm run build ยังไง และ serve เส้นทาง API ยังไง

Vibe Coder ที่ AI สร้าง Next.js ให้ ไม่ต้องเขียน Dockerfile ไม่ต้องตั้ง nginx ไม่ต้องกังวลเรื่อง server config — แค่ push to GitHub แล้ว Vercel จัดการเอง

---

2. เตรียมก่อน Deploy

ก่อนจะ deploy มีของ 3 อย่างที่ต้องเตรียมให้ครบ:

2.1 GitHub Repository

โค้ดต้องอยู่บน GitHub (หรือ GitLab / Bitbucket ก็ได้ แต่ GitHub ง่ายสุด)

ถ้ายังไม่มี repo ทำแบบนี้:

# ใน terminal ของโปรเจค
git init
git add .
git commit -m "initial commit"

# สร้าง repo บน GitHub แล้ว
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

หรือถ้าใช้ Cursor จะมี built-in Source Control ให้ทำได้เลยจากใน IDE

Checklist ก่อน push:

• ไฟล์ .env.local อยู่ใน .gitignore แล้ว
• ไม่มี hardcoded API keys ในโค้ด
• package.json มี "build" script ครบ
• โค้ดรันได้ใน npm run dev โดยไม่มี error

2.2 Environment Variables

โปรเจคส่วนใหญ่ที่ Vibe Coder สร้างมักมี secret หลายตัว เช่น:

# ตัวอย่าง env vars ที่มักใช้บ่อย
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR...
DATABASE_URL=postgresql://...
OPENAI_API_KEY=sk-...
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=https://your-domain.com

สำคัญมาก: ไฟล์ .env.local ต้องอยู่ใน .gitignore เสมอ ห้าม push secret ขึ้น GitHub เด็ดขาด Vercel จะให้ตั้ง env vars แยกต่างหากใน Dashboard

ถ้าโปรเจคของคุณเชื่อมกับ Supabase ดูวิธีตั้งค่าเพิ่มเติมได้ที่ Vibe Coding + Supabase Database

2.3 Build Command

Vercel จะ detect เองว่า project ใช้ framework อะไร แต่ตรวจสอบ package.json ให้แน่ใจก่อน:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

ถ้า build script ถูกต้อง Vercel จะหยิบไปใช้เองอัตโนมัติ

---

3. Step-by-Step: Deploy บน Vercel

Step 1: สมัคร / Login Vercel

ไปที่ vercel.com แล้ว login ด้วย GitHub account — แนะนำ login ด้วย GitHub เพราะจะ connect repo ได้ทันที

Step 2: Import Repository

1. คลิก "Add New Project" (หรือ "New Project" ถ้าเพิ่งสมัคร)
2. เลือก "Import Git Repository"
3. จะเห็นรายการ repo จาก GitHub — หา repo ที่ต้องการแล้วคลิก "Import"

ถ้าไม่เห็น repo ให้คลิก "Adjust GitHub App Permissions" เพื่อ grant access

Step 3: Configure Project

Vercel จะแสดง configuration screen:

Project Name:    your-project-name
Framework:       Next.js  ← detect อัตโนมัติ
Root Directory:  ./
Build Command:   next build  ← ดึงจาก package.json
Output Directory: .next
Install Command: npm install

สิ่งที่ต้องตั้งเพิ่มคือ Environment Variables — คลิก "Environment Variables" แล้วเพิ่มทีละตัว:

Name	Value	Environment
NEXT_PUBLIC_SUPABASE_URL	https://xxx.supabase.co	Production, Preview, Development
NEXT_PUBLIC_SUPABASE_ANON_KEY	eyJ...	Production, Preview, Development
DATABASE_URL	postgresql://...	Production, Preview

Tips: ตัวที่ขึ้นต้นด้วย NEXT_PUBLIC_ คือ public variable ที่ client อ่านได้ ตัวที่ไม่มีก็คือ server-only secret

Step 4: Deploy

คลิก "Deploy" — Vercel จะ:

1. Clone โค้ดจาก GitHub
2. รัน npm install
3. รัน next build
4. Deploy ขึ้น global CDN

ใช้เวลาประมาณ 1-3 นาที สำหรับ Next.js ทั่วไป เมื่อเสร็จจะได้ URL แบบนี้:

https://your-project-name.vercel.app

เปิดดูได้เลย — แอพ live แล้ว

Step 5: Verify การ Deploy

เปิด URL ที่ได้มา ทดสอบ feature หลักๆ ดูว่าทำงานได้ถูกต้อง ถ้ามี error ให้ดูที่ Vercel Dashboard → Functions → Logs เพื่อ debug

สิ่งที่ควรทดสอบหลัง deploy:

1. เปิดหน้าแรก — โหลดได้ปกติ ไม่มีหน้าขาว
2. ทดสอบ API routes (ถ้ามี) — เรียก endpoint แล้วได้ response
3. ทดสอบ auth flow — login/logout ทำงานถูกต้อง
4. ตรวจสอบ network tab — ไม่มี failed request
5. เช็ค Vercel Logs — ไม่มี server-side error

ถ้าทุกอย่างปกติ แสดงว่า deploy สำเร็จ 100%

---

4. Custom Domain + SSL อัตโนมัติ

URL แบบ xxx.vercel.app ใช้ได้ แต่ถ้าต้องการ domain ของตัวเองทำได้ง่ายมาก

เพิ่ม Custom Domain

1. ไปที่ Project Settings → Domains
2. พิมพ์ domain ที่ต้องการ เช่น myapp.com
3. คลิก "Add"
4. Vercel จะแสดง DNS records ที่ต้องตั้ง

ตั้ง DNS

ไปที่ domain registrar (Namecheap, GoDaddy, ฯลฯ) แล้วเพิ่ม:

Type  Name    Value
A     @       76.76.21.21
CNAME www     cname.vercel-dns.com

หรือถ้าใช้ Cloudflare เป็น DNS provider:

Type  Name    Value              Proxy
A     @       76.76.21.21        DNS only (ปิด orange cloud)
CNAME www     cname.vercel-dns.com   DNS only

SSL Certificate

ไม่ต้องทำอะไรเพิ่ม — Vercel ออก SSL certificate (Let's Encrypt) ให้อัตโนมัติภายใน 5-15 นาทีหลังตั้ง DNS เสร็จ เว็บจะขึ้น https:// เองโดยไม่ต้องตั้งค่าอะไรเพิ่ม

---

5. Preview Deployment ต่อ Pull Request

นี่คือ feature ที่ทำให้ Vibe Coder ทำงานได้เร็วและปลอดภัยขึ้นมาก

ทุกครั้งที่คุณ push branch ใหม่หรือสร้าง Pull Request Vercel จะ deploy เวอร์ชันนั้นออกมาให้เป็น URL แยกต่างหาก เช่น:

https://your-project-feature-new-login.vercel.app

ประโยชน์:

• ทดสอบ feature ใหม่โดยไม่กระทบ production
• ส่ง preview URL ให้ client ดูก่อน approve
• ถ้า AI สร้างโค้ดผิด เห็นได้ใน preview ก่อนที่จะ merge

workflow แบบนี้เหมาะมากกับ Vibe Coding เพราะคุณอาจจะ iterate ไอเดียหลายรอบก่อนที่จะพร้อม deploy จริง

---

6. Analytics + Speed Insights

Vercel มี built-in tools ให้ 2 ตัวที่ Vibe Coder ควรเปิดใช้ตั้งแต่แรก:

Vercel Analytics

ติดตาม real user visits โดยไม่ใช้ cookies — privacy-friendly และไม่ต้องตั้งค่า tracking script

เปิดใช้งาน: Project Dashboard → Analytics → Enable

แล้วเพิ่มใน app/layout.tsx:

import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Speed Insights

วัด Core Web Vitals (LCP, FID, CLS) จาก real users — บอกได้ว่าหน้าไหน load ช้า

เปิดใช้งาน: Project Dashboard → Speed Insights → Enable

เพิ่มใน code:

import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

ติดตั้ง packages:

npm install @vercel/analytics @vercel/speed-insights

หลังจาก push โค้ดขึ้น GitHub อีกครั้ง Vercel จะ redeploy อัตโนมัติ และข้อมูล Analytics กับ Speed Insights จะเริ่มเก็บทันที ใน Hobby tier ข้อมูล Analytics เก็บได้ 2,500 events/เดือน ซึ่งเพียงพอสำหรับ project ขนาดเล็กถึงกลาง

---

7. Pricing Tier: Hobby vs Pro

Vercel มี tier หลัก 2 ระดับสำหรับ personal projects:

Hobby (ฟรี)

รายการ	ขีดจำกัด
Projects	ไม่จำกัด
Deployments/เดือน	ไม่จำกัด
Bandwidth	100 GB/เดือน
Serverless Functions	100 GB-hours/เดือน
Team members	คนเดียว (personal)
Commercial use	ไม่อนุญาต
Custom domain	ใช่
Preview deployments	ใช่

เหมาะกับ: side projects, portfolio, prototypes, เรียนรู้

Pro ($20/เดือน)

รายการ	ขีดจำกัด
Bandwidth	1 TB/เดือน
Serverless Functions	1,000 GB-hours/เดือน
Team members	หลายคน
Commercial use	ใช่
Advanced Analytics	ใช่
Concurrent builds	12

เหมาะกับ: แอพ production จริง, startup, commercial projects, ทีม

สำหรับ Vibe Coder ที่เพิ่งเริ่ม Hobby tier เพียงพอมาก — เริ่มฟรีก่อน แล้วค่อย upgrade เมื่อมี traffic จริง

---

8. ทางเลือก: Netlify, Cloudflare Pages

ถ้าต้องการเปรียบเทียบกับ platform อื่น:

Netlify

• ดีมากสำหรับ static sites และ Jamstack
• มี netlify.toml สำหรับ custom config
• Form handling built-in
• Next.js support ดี แต่ไม่ native เท่า Vercel
• ราคา Pro $19/เดือน (ใกล้เคียง Vercel)

เหมาะกับ: โปรเจคที่ไม่ได้ใช้ Next.js เป็นหลัก เช่น Gatsby, Hugo, Astro

Cloudflare Pages

• CDN เร็วมากเพราะมี edge locations ทั่วโลก
• ฟรีได้ bandwidth ไม่จำกัด
• Workers สำหรับ edge functions
• Next.js support ยังมีข้อจำกัดบางอย่าง (ไม่รองรับ ISR ทุก feature)

เหมาะกับ: โปรเจคที่ต้องการ performance สูงสุดและงบจำกัด

สรุป: ถ้า Vibe Coder สร้าง Next.js app → Vercel คือ first choice เสมอ ถ้าเป็น framework อื่นค่อยพิจารณา Netlify หรือ Cloudflare Pages

เปรียบเทียบสรุป

สิ่งที่สำคัญ	Vercel	Netlify	Cloudflare Pages
Next.js 14+ features ครบ	ใช่	บางส่วน	บางส่วน
Pricing เริ่มต้น	ฟรี	ฟรี	ฟรี
ตั้งค่าเร็วที่สุด	ใช่	ใช่	ใช่
Edge runtime	ใช่	ใช่	ใช่ (Workers)
ชุมชน / docs ภาษาไทย	มากสุด	น้อย	น้อย

---

9. ข้อผิดพลาดที่มักเจอ (และวิธีแก้)

Build Error: Module Not Found

Error: Cannot find module './components/Button'

สาเหตุ: Case sensitivity — Mac อนุโลม button.tsx กับ Button.tsx เหมือนกัน แต่ Linux (ที่ Vercel รัน) ไม่อนุโลม

วิธีแก้: ตรวจสอบ import path ให้ตรงกับชื่อไฟล์จริงทุกตัวพิมพ์เล็กพิมพ์ใหญ่

// ผิด (ถ้าไฟล์ชื่อ Button.tsx)
import Button from './button'

// ถูก
import Button from './Button'

Environment Variables Missing

Error: NEXT_PUBLIC_SUPABASE_URL is not defined

สาเหตุ: ลืมเพิ่ม env vars ใน Vercel Dashboard — ไฟล์ .env.local ไม่ได้ถูก deploy ขึ้นไปด้วย

วิธีแก้: ไปที่ Project Settings → Environment Variables แล้วเพิ่มทุกตัวให้ครบ จากนั้น redeploy

Function Timeout

Error: Function execution timeout after 10s

สาเหตุ: Serverless function ใช้เวลานานเกิน (เช่น query ช้า, external API ช้า)

วิธีแก้: เพิ่ม timeout config ใน vercel.json:

{
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 30
    }
  }
}

Hobby tier อนุญาตสูงสุด 10 วินาที, Pro tier สูงสุด 300 วินาที

Build Succeeds แต่ Page ขาว

สาเหตุส่วนใหญ่: JavaScript error ขณะ hydration — ดู browser console จะเห็น error

วิธีแก้: เปิด DevTools → Console แล้วดู error ที่ขึ้น บ่อยครั้งเป็น undefined variable หรือ SSR/Client mismatch

// ปัญหา: window ไม่มีใน server-side
const width = window.innerWidth  // Error ใน SSR

// แก้ด้วย useEffect
const [width, setWidth] = useState(0)
useEffect(() => {
  setWidth(window.innerWidth)
}, [])

TypeScript Type Error

Type error: Type 'string | undefined' is not assignable to type 'string'

สาเหตุ: Vercel รัน type check เป็นส่วนหนึ่งของ build (ต่างจาก next dev ที่ยอมให้ผ่าน)

วิธีแก้: แก้ type ให้ถูกต้อง หรือถ้าต้องการ skip ชั่วคราว (ไม่แนะนำ):

// next.config.js
module.exports = {
  typescript: {
    ignoreBuildErrors: true,  // ใช้เฉพาะ emergency เท่านั้น
  }
}

---

10. ขั้นตอนถัดไป

ตอนนี้แอพของคุณ live บน production แล้ว ขั้นตอนต่อไปที่ควรทำ:

Setup ที่แนะนำหลัง deploy:

• เพิ่ม custom domain ถ้ายังไม่มี
• เปิด Analytics + Speed Insights
• ตั้ง Vercel project environment ให้ครบ (Production / Preview / Development แยกกัน)
• ทดสอบ Preview deployment โดยสร้าง feature branch แล้ว push ดู

เรียนรู้เพิ่มเติม:

• ดู Vibe Coding คืออะไร? เพื่อเข้าใจ core concept
• ตั้งค่า Cursor + Claude ถ้ายังไม่ได้ setup
• ดู workshop และ course ของ AI Unlocked สำหรับ สอน AI Chiang Mai และเมืองอื่นๆ

---

สรุป: Vibe Coding Deploy ทำได้ใน 1 ชั่วโมง

Vercel ทำให้การ deploy Next.js app กลายเป็นเรื่องง่ายที่สุดในบรรดา hosting platform ทั้งหมด — เหมาะสมที่สุดสำหรับ Vibe Coder ที่ต้องการเอาแอพขึ้น production เร็วโดยไม่ต้องกังวลเรื่อง infrastructure

สรุปขั้นตอนทั้งหมด:

1. Push โค้ดขึ้น GitHub
2. Import repo ใน Vercel Dashboard
3. ตั้ง environment variables
4. กด Deploy — เสร็จใน 1-3 นาที
5. เพิ่ม custom domain + SSL อัตโนมัติ
6. เปิด Preview deployments สำหรับทุก PR
7. เพิ่ม Analytics + Speed Insights

ถ้าอยากเรียนรู้การทำ Vibe Coding แบบเต็ม ตั้งแต่ setup AI tools จนถึง deploy production จริง ดูรายละเอียดได้ที่ /vibe-code-setup และถ้าสนใจ course เพิ่มเติมดูได้ที่ ราคาและแพ็คเกจ

---

มีคำถามเรื่อง deploy หรือเจอ error อะไรที่ไม่อยู่ในบทความ? ทิ้งคำถามไว้ใน community ได้เลย ทีม AI Unlocked ยินดีช่วยทุกขั้นตอน