How to deploy Nextjs on Vercel

วันนี้มาแนะนำเครื่องมือสำหรับ deploy website บทความนี้จะ เป็น project nextjs deploy บน Vercel ที่สำคัญฟรี

มาครับเริ่มกันเลย สิ่งที่ต้องเตรียม

  • project nextjs วิธีการ setup project nextjs อ้างอิง อัพขึ้น GitHub Gitlab ...

หลังจากที่มี repo พร้อมแล้ว

เรามาเริ่ม วิธีการ deploy กันเลย

Vercel: Develop. Preview. Ship. For the best frontend teams
Vercel’s frontend cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web.
Login – Vercel
Welcome to Vercel. Log in with GitHub, GitLab, Bitbucket, or email to deploy websites for free with zero configuration, automatic SSL, and global CDN.

Login กันเข้ามาเลย หลังจากที่ login เสร็จแล้ว ทางด้านขวาบน กด new project กันเลย

เลือก repo จาก Git ที่เขาฝาก project เจอแล้ว กด import กันเลย

เพื่อน import แล้วจะได้หน้าตาแบบนี้ จะให้เราตั้งค่า project ของเขา

  • Build command : คำสั่งสำหรับ Build project ของเรา ถ้าเป็น nextjs ไม่ต้องแก้ไขเลย
  • Output Directory : ปกติ nextjs จะ build output อยู่ที่ .next อยู่แล้ว ไม่ต้องแก้ไขเลย
  • Install command : คำสั่ง install deps ไม่ต้องแก้ไขเลย

ส่วนของ Env vars ถ้ามีระบุได้เลยยย

พร้อมแล้ว กด Deploy เลย

รอ deploy ไม่นาน website เราก็พร้อมใช้งานแล้ว เป็นไงไม่กี่คลิก ก็ deploy website ของเราได้แล้วว

vercel ยังทำ Custom domain เป็น domain ของเราได้นะ

อันนี้ก็เป็นวิธีการ deploy website ง่ายๆ เพื่อเอาไว้ deploy poc project กัน