DG
DevGuideRun Code
Home/Vercel & Deploy/Deploying to Vercel
▲ Vercel & Deploy1 / 1

Deploying to Vercel

📌 WHAT

Vercel is the cloud platform built by the creators of Next.js. It automatically builds and deploys your app when you push to GitHub, with zero configuration.

💡 WHY

Automated CI/CD means every push to main deploys in ~1 minute. Every PR gets a preview URL. Global CDN means fast loading worldwide.

⏰ WHEN / WHERE

The standard deployment target for any Next.js application. Free tier is generous for personal/small projects.

🔧 HOW

Connect GitHub repo → Vercel detects Next.js → auto-configures build → deploys. Set environment variables in the Vercel dashboard.

Code Examples

#1Deploy in 3 steps

Deploy in 3 steps
bash
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# ============================================
# DEPLOYING TO VERCEL
# ============================================


# Step 1: Install Vercel CLI (optional but useful)
npm install -g vercel


# Step 2: Login
vercel login


# Step 3: Deploy from project folder
vercel        # preview deployment
vercel --prod # production deployment


# ============================================
# Or use GitHub integration (RECOMMENDED):
# 1. Go to vercel.com → New Project
# 2. Import your GitHub repository
# 3. Vercel auto-detects Next.js settings
# 4. Add environment variables
# 5. Click Deploy → done!
# ============================================


# ============================================
# ENVIRONMENT VARIABLES
# ============================================
# In Vercel Dashboard → Project → Settings → Environment Variables
# Add for: Production, Preview, and Development


# .env.local (NEVER commit this file!)
NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJ...
SUPABASE_SERVICE_KEY=eyJhbGciOiJ...  # server-only, no NEXT_PUBLIC_


# NEXT_PUBLIC_ prefix = exposed to browser
# Without prefix = server-only (secrets are safe)


# ============================================
# .gitignore — what to NEVER commit
# ============================================
# node_modules/       — dependencies (npm install recreates)
# .env.local          — secrets!
# .env*.local         — all local env files
# .next/              — build output (Vercel builds this)
# *.log               — log files


# ============================================
# vercel.json — optional config
# ============================================
Try in Playground

#2vercel.json configuration

vercel.json configuration
json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": ["sin1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET,POST,PUT,DELETE,OPTIONS" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-path",
      "destination": "/new-path",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/api/external/:path*",
      "destination": "https://external-api.com/:path*"
    }
  ]
}
Try in Playground

Practice This Concept

Open the playground, paste any example, and experiment. The best way to learn is by breaking things.

Open in Playground
Previous
Daily Git Workflow