Deploy ขึ้น Vercel ได้ลิงก์ของตัวเอง
ใช้ใน Challenge Day 2
Deploy คือการเอาเว็บจากเครื่องเราขึ้นเซิร์ฟเวอร์ให้ทุกคนเข้าได้ Vercel (ทีมเดียวกับที่ทำ Next.js) ต่อกับ GitHub ได้ตรง ๆ: push ขึ้น main เมื่อไร เว็บ deploy ใหม่เอง
At a glance
| Item | Details |
|---|---|
| ราคา | แผน Hobby ฟรี สำหรับโปรเจกต์ส่วนตัว |
| บัญชี | สมัครด้วย GitHub ที่ vercel.com/signup |
| ลิงก์ที่ได้ | ชื่อโปรเจกต์.vercel.app |
| Production | ทุก push ขึ้น main |
| Preview | ทุก branch และ pull request ได้ลิงก์ของตัวเองไว้เช็กก่อน |
How it works
git push ──▶ GitHub ──▶ Vercel build (npm run build) ──▶ https://my-portfolio.vercel.app- Push โค้ดขึ้น GitHub
- Vercel เห็น commit ใหม่ ดึงโค้ดไปรัน
npm run build - ถ้า build ผ่าน เว็บเวอร์ชันใหม่ขึ้นทันที ถ้าไม่ผ่าน เว็บเดิมยังอยู่ ไม่พัง
Deploy ครั้งแรก
ก่อนเริ่ม ต้องมีโปรเจกต์ Next.js อยู่บน GitHub แล้ว (ดูวิธี push)
Import repo
ไปที่ vercel.com/new เลือก repo ของคุณ แล้วกด Import
ตั้งค่า
Vercel รู้เองว่าเป็น Next.js ปล่อยค่าเริ่มต้นไว้ ถ้ามี environment variable ให้ใส่ตรงนี้
Deploy
กด Deploy รอประมาณ 1 นาที จะได้ลิงก์
ชื่อโปรเจกต์.vercel.appแก้แล้ว push
ต่อจากนี้แค่ push เว็บก็อัปเดตเอง
git add . git commit -m "update hero" git push
Deploy ไม่ผ่าน?ส่วนใหญ่เป็นเพราะ build พังบนเครื่องอยู่แล้ว รัน npm run build บนเครื่องก่อน push ทุกครั้ง แล้วดู log ที่หน้า Deployments ใน Vercel
Vercel CLI
ไม่บังคับ ใช้เมื่ออยาก deploy จาก Terminal
npm i -g vercel # ติดตั้งครั้งเดียว
vercel login
vercel # deploy เป็น preview
vercel --prod # deploy ขึ้น production
vercel env pull # ดึง environment variables ลงไฟล์ .env.localฝึกต่อ
เว็บสำหรับลงมือทำ
เอกสาร · vercel.comVercel: Getting started เอกสารทางการเอกสาร · nextjs.orgNext.js: Deploying ตัวเลือกการ deploy ทั้งหมดลงมือทำ · vercel.comVercel Templates เทมเพลต portfolio ให้ deploy แล้วแกะดูเอกสาร · vercel.comVercel: Custom domains ต่อโดเมนของตัวเอง
วิดีโอเรียนเอง
Next steps
- Challenge Day 2: deploy portfolio ของคุณ
- PERN Stack หรือ Nextbase: ทำหลังบ้านของตัวเอง
CS ChallengeLast updated Oct 2026