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.
![](https://assets.vercel.com/image/upload/front/vercel/dps.png)
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.
![](https://assets.vercel.com/image/upload/front/vercel/twitter-card.png)
Login กันเข้ามาเลย หลังจากที่ login เสร็จแล้ว ทางด้านขวาบน กด new project กันเลย
![](https://d13q9rhbndrrl0.cloudfront.net/ghost_blog/2023/06/Screenshot-2566-06-24-at-15.55.23.png)
เลือก repo จาก Git ที่เขาฝาก project เจอแล้ว กด import กันเลย
![](https://d13q9rhbndrrl0.cloudfront.net/ghost_blog/2023/06/Screenshot-2566-06-24-at-15.55.51.png)
เพื่อน import แล้วจะได้หน้าตาแบบนี้ จะให้เราตั้งค่า project ของเขา
- Build command : คำสั่งสำหรับ Build project ของเรา ถ้าเป็น nextjs ไม่ต้องแก้ไขเลย
- Output Directory : ปกติ nextjs จะ build output อยู่ที่ .next อยู่แล้ว ไม่ต้องแก้ไขเลย
- Install command : คำสั่ง install deps ไม่ต้องแก้ไขเลย
ส่วนของ Env vars ถ้ามีระบุได้เลยยย
พร้อมแล้ว กด Deploy เลย
![](https://d13q9rhbndrrl0.cloudfront.net/ghost_blog/2023/06/Screenshot-2566-06-24-at-15.56.27.png)
รอ deploy ไม่นาน website เราก็พร้อมใช้งานแล้ว เป็นไงไม่กี่คลิก ก็ deploy website ของเราได้แล้วว
vercel ยังทำ Custom domain เป็น domain ของเราได้นะ
อันนี้ก็เป็นวิธีการ deploy website ง่ายๆ เพื่อเอาไว้ deploy poc project กัน