Vercel Deployment Introduction - Publish Your Next.js App

What You’ll Learn in This Tutorial

✓ Creating a Vercel account
✓ GitHub repository integration
✓ Automatic deployment setup
✓ Environment variable configuration
✓ Custom domains

Step 1: Create Vercel Account

1. Visit vercel.com
2. Sign Up → Continue with GitHub
3. Link your GitHub account

Step 2: Import Project

1. Click New Project
2. Import Git Repository
3. Select your repository
4. Verify settings in Configure Project
5. Click Deploy

Step 3: Deploy from Local

# Install Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy
vercel

# Production deploy
vercel --prod

Step 4: Environment Variable Configuration

Dashboard → Project → Settings → Environment Variables

1. Enter Key and Value
2. Select Environment (Production/Preview/Development)
3. Click Add

# Set via CLI
vercel env add VARIABLE_NAME

# Import from .env.local
vercel env pull

Step 5: Custom Domain

1. Settings → Domains
2. Enter domain name
3. Configure DNS records
   - A record: 76.76.21.21
   - Or CNAME: cname.vercel-dns.com
4. SSL certificate is automatically issued

Step 6: Preview Deployment

- Preview URL is automatically generated when you create a PR
- Preview URL is posted as a comment
- Review before merging

Step 7: vercel.json Configuration

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["hnd1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

Best Practices

✓ Always set environment variables in the dashboard
✓ Use preview deployments for PR reviews
✓ Use Edge Functions for global distribution
✓ Monitor performance with Analytics

Summary

Vercel is a platform optimized for Next.js, offering convenient automatic deployments and preview features integrated with GitHub.