วิธีใช้งาน Vercel: คู่มือฉบับเร่งรัดตั้งแต่การ Deploy ครั้งแรกจนถึง Production

Q: What is the fastest way to learn how to use Vercel?

Connect your Git repo, deploy a starter (like Next.js), and explore preview URLs on each push. Then add environment variables, a custom domain, and a simple API route to cover the core workflow.

Q: How to use Vercel with Next.js for best performance?

Use ISR (`revalidate`), `next/image` optimization, and Edge Middleware for lightweight logic. Cache external fetches and choose edge or serverless runtimes based on workload.

Q: Can I use Vercel without Next.js?

Yes—Vercel supports frameworks like Astro, SvelteKit, Remix, and Nuxt. Ensure the correct build command and output directory are set, and use `vercel.json` if you need custom routing.

Q: How do I set environment variables on Vercel?

In the Vercel dashboard, go to Project → Settings → Environment Variables and add values for Development, Preview, and Production. Use `NEXT_PUBLIC_` for variables that must be exposed to the client.

Q: How to use Vercel for custom domains and SSL?

Add your domain under Project → Domains; Vercel provisions SSL automatically. Point your DNS records (CNAME or A/ALIAS) to Vercel and verify in the dashboard.

หากคุณเคยหวังว่าการ Deploy เว็บแอปจะให้ความรู้สึกเหมือนการบันทึกไฟล์มากกว่าการส่งโค้ด นี่คือข่าวดี: นั่นคือความรู้สึกที่คุณจะได้รับจาก Vercel เมื่อทุกอย่างลงตัว ในเวลาไม่กี่นาที คุณสามารถเปลี่ยนจาก Local Dev ไปเป็นแอป Edge-accelerated ระดับโลก พร้อมตัวอย่างสำหรับทุก Pull Request และไม่ต้องดูแล DevOps เลย คู่มือเชิงปฏิบัติและเน้นการแก้ปัญหานี้จะแนะนำคุณทีละขั้นตอนเกี่ยวกับวิธีใช้งาน Vercel ซึ่งครอบคลุมการตั้งค่า Framework เช่น Next.js, ตัวแปรสภาพแวดล้อม, Serverless Functions, Edge Middleware, โดเมน, พื้นที่จัดเก็บข้อมูล, Observability และแนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้งานจริง

เราจะดำเนินการอย่างรวดเร็ว แต่คุณจะได้รับแนวทาง ข้อควรระวัง และตัวอย่างที่คุณสามารถคัดลอกและวางได้ ไม่ว่าคุณจะ Deploy Landing Page, Next.js SaaS หรือ Monorepo คุณจะได้เรียนรู้สิ่งจำเป็นในการเผยแพร่อย่างมั่นใจ

Vercel คืออะไรและทำไมต้องใช้

Vercel คือแพลตฟอร์มสำหรับพัฒนา ดูตัวอย่าง และเผยแพร่เว็บแอปพลิเคชัน โดยได้รับการปรับแต่งให้เหมาะสมกับ Framework สมัยใหม่ (โดยเฉพาะ Next.js) โดยมีข้อดีดังนี้:

การ Deploy ที่รวดเร็วทันใจ: ทุกครั้งที่ git push จะสร้าง URL ตัวอย่างที่ไม่ซ้ำกัน

ประสิทธิภาพระดับโลก: Static Assets, Edge Middleware และ Caching ที่ Edge

Serverless Functions: API Routes โดยไม่ต้องจัดเตรียมเซิร์ฟเวอร์

CI-less Previews: สร้าง + ดูตัวอย่างอัตโนมัติสำหรับแต่ละ PR

การรองรับ Next.js ระดับ First-Class: Image Optimization, Middleware, ISR (Incremental Static Regeneration)

หากเป้าหมายของคุณคือความเร็ว DX และความน่าเชื่อถือ โดยมีค่าใช้จ่ายในการดำเนินงานน้อยที่สุด การเรียนรู้วิธีใช้งาน Vercel จะคุ้มค่าอย่างรวดเร็ว

การตั้งค่า: วิธีใช้งาน Vercel ใน 10 นาที

สร้างบัญชี ที่ vercel.com และเชื่อมต่อ GitHub/GitLab/Bitbucket

นำเข้า Repo ของคุณ (เช่น Next.js, React, SvelteKit, Astro, Remix, Nuxt) Vercel จะตรวจจับ Framework และการตั้งค่า Build โดยอัตโนมัติ

คลิก Deploy → Vercel จะ Build และให้ URL ตัวอย่างที่ไม่ซ้ำกันแก่คุณ

ตั้งค่าตัวแปรสภาพแวดล้อม ภายใต้ Project → Settings → Environment Variables

โปรโมทไปยัง Production โดยการตั้งค่า Production Branch (โดยปกติคือ main) และรวม PR ของคุณ

เพิ่ม Custom Domain ภายใต้ Project → Domains และชี้ DNS

ตรวจสอบ Builds, Logs และประสิทธิภาพผ่าน Dashboard

คุณได้เรียนรู้เส้นทางที่สั้นที่สุดสำหรับวิธีใช้งาน Vercel แล้ว ตอนนี้เราจะเจาะลึกกัน

เริ่มต้นใช้งาน: จาก Local สู่การ Deploy ครั้งแรก

1) สร้างหรือนำเข้าโปรเจกต์

แอป Next.js ใหม่:

npx create-next-app@latest my-app
cd my-app
npm run dev

เริ่มต้น Git และ Push:

git init
git add -A
git commit -m "init"
git branch -M main
git remote add origin {your-repo-url}
git push -u origin main

ใน Vercel: New Project → Import Git Repository → Deploy

Vercel จะตรวจจับ Framework โดยอัตโนมัติ (เช่น Next.js) และตั้งค่าเริ่มต้น เช่น npm install, npm run build และ Output Directories

2) ทำความเข้าใจสภาพแวดล้อม

Development: เครื่อง Local (npm run dev)

Preview: ทุก PR หรือ Branch Push จะ Deploy ไปยัง URL ที่ไม่ซ้ำกัน เช่น `

Production: Main Branch (กำหนดค่าได้) → `

นี่คือหัวใจสำคัญของวิธีใช้งาน Vercel อย่างมีประสิทธิภาพ: ถือว่าทุก PR เป็นลิงก์ Staging ที่แชร์ได้

แนวคิดหลักที่คุณจะได้ใช้จริง

ตัวแปรสภาพแวดล้อม

ไปที่ Project → Settings → Environment Variables

เพิ่มตัวแปรสำหรับ Development, Preview, Production แยกกัน

ใน Next.js ให้เปิดเผยตัวแปรที่ปลอดภัยให้กับ Client ด้วย Prefix NEXT_PUBLIC_

ตัวอย่าง:

NEXT_PUBLIC_API_BASE=
DATABASE_URL=postgres://...
JWT_SECRET=supersecret

ใช้งานในโค้ด:

const api = process.env.NEXT_PUBLIC_API_BASE
const conn = process.env.DATABASE_URL

Serverless Functions (API Routes)

ใน Next.js ให้สร้าง pages/api/hello.ts หรือ app/api/hello/route.ts

ตัวอย่าง (App Router):

// app/api/hello/route.ts
import { NextResponse } from 'next/server'
export async function GET {
return NextResponse.json({ message: 'Hello from Vercel Functions!' })
}

สิ่งเหล่านี้จะ Deploy เป็น Serverless Functions โดยมีการเริ่มต้น Cold Start ที่น้อยที่สุด และ Logs ที่มองเห็นได้ใน Dashboard ของ Vercel

Edge Middleware

ใช้สำหรับการตรวจสอบสิทธิ์, A/B Testing, Localization, Rewrites หรือ Bot/Firewall Rules ที่ Edge

ตัวอย่าง middleware.ts:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
const country = req.geo?.country || 'US'
const res = NextResponse.next
res.headers.set('x-country', country)
return res
}

Image Optimization และ Static Assets

Next.js next/image จะใช้ Image Optimization ของ Vercel โดยอัตโนมัติ

ใส่ Static Files ใน public/ Vercel จะให้บริการและ Cache ที่ Edge

ISR (Incremental Static Regeneration)

สร้างใหม่เฉพาะหน้าที่เปลี่ยนแปลง ไม่จำเป็นต้อง Redeploy ทั้งหมด

ใน Next.js App Router:

export const revalidate = 60 // seconds

Deploy Workflows ที่ปรับขนาดได้

Branch Previews เป็น Product Workflow

Push ไปยัง Feature Branch → แชร์ URL ตัวอย่างกับ PM/Design

รวบรวม Feedback ใน Context ไม่มี Screenshots เพียงแค่ Live Feature

รวมเมื่อได้รับการอนุมัติ Vercel จะโปรโมทไปยัง Production โดยอัตโนมัติหาก main ถูกตั้งค่าเป็น Production

Monorepos

Vercel รองรับ Monorepos ตั้งค่า Project Root ระหว่างการนำเข้า

ใช้ vercel.json เพื่อกำหนดค่า Builds และ Ignores:

{
"buildCommand": "pnpm -w build",
"ignoreCommand": "git diff --quiet HEAD^ HEAD ./apps/web",
"framework": "nextjs"
}

Custom Build Settings

Override Build Commands ใน Project → Settings → Build & Development

ตั้งค่า Output Directory หากใช้ Framework เช่น Astro (dist) หรือ Remix

วิธีใช้งาน Vercel กับ Next.js (จุดที่ลงตัว)

Next.js เป็น Reference Framework สำหรับ Vercel ดังนั้นคุณจะได้รับ DX ที่ดีที่สุดที่นี่

App Router Features เช่น Route Handlers, Server Actions, dynamic = 'force-dynamic' และ Caching Directives จะเชื่อมโยงโดยตรงกับ Vercel Infra

ตัวอย่าง API Route พร้อม Caching:

// app/api/products/route.ts
import { NextResponse } from 'next/server'
export async function GET {
const data = await fetch('{next: { revalidate: 3600 } })
return NextResponse.json(await data.json)
}

ตัวอย่าง Dynamic Rendering Control:

export const dynamic = 'force-dynamic' // opt out of static rendering

Edge Runtime:

export const runtime = 'edge'

สิ่งเหล่านี้คือ Levers ที่ใช้งานได้จริงในวิธีใช้งาน Vercel เพื่อสร้างสมดุลระหว่างความเร็ว ความสดใหม่ และค่าใช้จ่าย

Domains, SSL และ Redirects

เพิ่ม Domain ภายใต้ Project → Domains Vercel จะ Provision SSL โดยอัตโนมัติ

สำหรับ DNS ให้ชี้ CNAME (หรือ A/ALIAS เมื่อจำเป็น) ไปยัง Target ของ Vercel

Redirects และ Rewrites ผ่าน next.config.js หรือ vercel.json:

// next.config.js
module.exports = {
async redirects {
return lets you chat with AI on any page—handy for generating config snippets, summarizing PR previews, or drafting post-deploy checklists right from the Vercel dashboard.
---
## Next Steps: Ship Something Today
- Create a small Next.js app and deploy it to a preview URL.
- Add a custom domain and try a redirect.
- Introduce one Edge Middleware rule (like a geo header or simple auth gate).
- Hook up error monitoring and check logs after a few test requests.
Once you’ve done this once, you’ll understand not just how to use Vercel, but how to use it to move faster than your process used to allow.
---
## Key Takeaways
- How to use Vercel in practice: connect Git → deploy → preview → merge to prod.
- Lean on built-in features: Edge Middleware, serverless functions, ISR, image optimization.
- Separate envs and automate feedback via previews for every PR.
- Add a domain early; monitor logs and web vitals from day one.
- Optimize cost with caching, ISR, and thoughtful runtime choices.
### FAQ
Q1:What is the fastest way to learn how to use Vercel?
Connect your Git repo, deploy a starter (like Next.js), and explore preview URLs on each push. Then add environment variables, a custom domain, and a simple API route to cover the core workflow.
Q2:How to use Vercel with Next.js for best performance?
Use ISR (`revalidate`), `next/image` optimization, and Edge Middleware for lightweight logic. Cache external fetches and choose edge or serverless runtimes based on workload.
Q3:Can I use Vercel without Next.js?
Yes—Vercel supports frameworks like Astro, SvelteKit, Remix, and Nuxt. Ensure the correct build command and output directory are set, and use `vercel.json` if you need custom routing.
Q4:How do I set environment variables on Vercel?
In the Vercel dashboard, go to Project → Settings → Environment Variables and add values for Development, Preview, and Production. Use `NEXT_PUBLIC_` for variables that must be exposed to the client.
Q5:How to use Vercel for custom domains and SSL?
Add your domain under Project → Domains; Vercel provisions SSL automatically. Point your DNS records (CNAME or A/ALIAS) to Vercel and verify in the dashboard.