Deploy to Vercel — One-Click Deployment from GitHub

Why Vercel Matters

Vercel is the leading platform for deploying frontend applications and serverless functions. It integrates seamlessly with GitHub, provides automatic HTTPS, global CDN, and supports Next.js, React, Svelte, and many other frameworks.

Why this matters for your career:

• Vercel is the most popular deployment platform for Next.js and Jamstack apps
• One-click deployment from GitHub eliminates manual server setup
• Vercel's free tier is generous enough for most projects and portfolios
• Understanding Vercel is expected for frontend developers

Getting Started

1. Sign Up and Install

1. Go to vercel.com and sign up with GitHub
2. Install the Vercel GitHub App (grants access to your repositories)
3. Click "Add New Project"
4. Select a repository from GitHub

2. Configure Build Settings

Framework Preset: Next.js
Build Command: npm run build
Output Directory: .next
Install Command: npm install

Vercel automatically detects most frameworks. You can override the build settings if needed.

3. Environment Variables

Configure environment variables in the Vercel dashboard:

# Development (local)
NEXT_PUBLIC_API_URL=http://localhost:3000/api
DATABASE_URL=postgresql://localhost/mydb

# Production (Vercel)
NEXT_PUBLIC_API_URL=https://api.myapp.com
DATABASE_URL=postgresql://prod-host/mydb

You can set different values per environment:

• Production
• Preview (for PR deployments)
• Development (local)

4. Deploy

Click "Deploy" and within seconds your site is live:

https://my-project.vercel.app

Every push to the main branch automatically triggers a production deployment.

Preview Deployments

Every pull request gets a unique preview URL:

https://my-project-git-feature-login-username.vercel.app

This lets you:

• Share the preview with teammates for review
• Test changes before merging to main
• Catch visual regressions early

Visit the preview URL and leave comments directly on the page using Vercel's Comments feature.

Custom Domains

# Add your domain in Vercel dashboard
# Settings → Domains → Add

# Update your DNS records
Type: CNAME
Name: www
Value: cname.vercel-dns.com

# Or point the apex domain (example.com)
Type: A
Name: @
Value: 76.76.21.21

Vercel automatically provisions SSL certificates via Let's Encrypt.

Serverless Functions

Vercel supports serverless functions in api/ directory:

// api/hello.js
export default function handler(req, res) {
  res.status(200).json({
    message: 'Hello from Vercel!',
    env: process.env.NODE_ENV
  });
}

// api/users.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const body = req.body;
    res.status(201).json({ id: 123, ...body });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Serverless Function Limits

| Limit | Value | |-------|-------| | Memory | 1024 MB | | Execution timeout | 60 seconds | | Payload size | 4.5 MB | | Concurrency | 1000 per function | | Regions | 18 global regions |

Environment-Specific Configuration

// next.config.js
const nextConfig = {
  // Configure for Vercel deployment
  images: {
    domains: ['images.unsplash.com'],
  },

  // Headers for production
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ];
  },
};

Vercel Dashboard Features

| Feature | Description | |---------|-------------| | Analytics | Traffic, performance, and usage metrics | | Logs | Real-time and historical deployment logs | | Cron Jobs | Scheduled serverless function execution | | Edge Functions | Run code at the CDN edge for low latency | | Incremental Static Regeneration | Update static pages without full rebuild | | Image Optimization | Automatic WebP conversion and resizing | | Password Protection | Restrict access to preview deployments |

Comparison with Other Platforms

| Feature | Vercel | Netlify | Render | |---------|--------|---------|--------| | Framework support | Next.js (first-class), React, Svelte | Gatsby, React, Vue | Node.js, Python, Go, Docker | | Serverless functions | ✅ | ✅ | ✅ (services) | | Edge functions | ✅ | ✅ (Edge Handlers) | ❌ | | Preview deployments | ✅ | ✅ | ✅ | | Custom domains | ✅ | ✅ | ✅ | | Free tier | Generous | Generous | Limited | | Global CDN | ✅ | ✅ | ✅ | | Cron jobs | ✅ | ❌ | ❌ | | Image optimization | ✅ | ❌ | ❌ | | Database | ❌ (external) | ❌ (external) | ✅ (built-in) |

Best Practices

| Practice | Reason | |----------|--------| | Use environment variables for secrets | Never hardcode API keys in source code | | Test preview deployments before merging | Catch issues before production | | Set up automatic HTTPS with custom domain | Security and SEO benefit | | Configure proper caching headers | Improved load times | | Use Vercel Analytics for performance monitoring | Identify slow pages and errors | | Set deployment protection for previews | Prevent unauthorized access |

Summary

Vercel makes deployment effortless. Connect your GitHub repository, configure build settings, set environment variables, and deploy. Preview deployments for PRs, custom domains with automatic SSL, and serverless functions make Vercel the ideal platform for frontend applications.

Key takeaways:

• Connect GitHub repo and deploy with one click
• Automatic preview deployments for every PR
• Custom domains with free SSL via Let's Encrypt
• Serverless functions in the api/ directory
• Environment variables for different environments
• Vercel Analytics for performance monitoring
• Free tier covers most personal projects

What's Next: Environment Variables & Security

The next chapter covers environment variables and security best practices for deployments — managing secrets, preventing leaks, and secure configuration.