Deploying on Vercel

🚀 What is Vercel?

Vercel is the platform built by the creators of Next.js, offering seamless deployment with zero configuration. It provides automatic HTTPS, global CDN, instant rollbacks, and preview deployments for every git push.


# Install Vercel CLI
npm install -g vercel

# Deploy your app
vercel

Vercel Features

⚡

Instant Deployment

Deploy in seconds with git push

Auto Deploy Zero Config Fast Build

🌍

Global CDN

Serve content from edge locations

Fast Loading Low Latency Worldwide

👁️

Preview Deploys

Test changes before production

PR Previews Unique URLs Team Review

🔒

Automatic HTTPS

SSL certificates included free

Secure Auto Renew Custom Domain

🔹 Deploy via GitHub

The easiest way to deploy is connecting your GitHub repository. Vercel automatically detects Next.js projects and configures everything. Every push to your main branch triggers a production deployment, while pull requests get preview URLs.

Steps to Deploy:

Push your Next.js project to GitHub
Go to vercel.com and sign up
Click "Import Project" and select your repository
Vercel auto-detects Next.js and deploys!

# Push your code to GitHub
git add .
git commit -m "Ready for deployment"
git push origin main

# Vercel automatically deploys your app!
# You'll get a URL like: your-app.vercel.app

🔹 Deploy via CLI

Use the Vercel CLI for quick deployments from your terminal. This method is perfect for testing or when you prefer command-line workflows. The CLI guides you through setup and remembers your configuration for future deployments.

# Install Vercel CLI globally
npm install -g vercel

# Navigate to your Next.js project
cd my-nextjs-app

# Login to Vercel
vercel login

# Deploy to production
vercel --prod

# Your app is live!
# Output: https://your-app.vercel.app

🔹 Environment Variables

Add environment variables through the Vercel dashboard or CLI. Variables are encrypted and securely injected during build and runtime. You can set different values for production, preview, and development environments.

# Add environment variables via CLI
vercel env add DATABASE_URL

# Or create vercel.json in your project
{
  "env": {
    "API_KEY": "@api-key-secret"
  }
}

# Access in your Next.js app
// app/api/data/route.ts
export async function GET() {
  const apiKey = process.env.API_KEY
  // Use your environment variable
}

Environment Variable Types:

Production: Used in production deployments
Preview: Used in preview deployments (PRs)
Development: Used locally with vercel dev

🔹 Custom Domain Setup

Connect your custom domain to your Vercel deployment. Vercel handles SSL certificates automatically and provides DNS configuration guidance. You can add multiple domains and set up redirects easily.

# Add domain via CLI
vercel domains add yourdomain.com

# Or in Vercel Dashboard:
# 1. Go to Project Settings
# 2. Click "Domains"
# 3. Add your domain
# 4. Update DNS records as shown

# DNS Configuration Example:
# Type: A
# Name: @
# Value: 76.76.21.21

# Type: CNAME
# Name: www
# Value: cname.vercel-dns.com

🔹 Vercel Configuration File

Customize your deployment with vercel.json. This optional file lets you configure redirects, headers, build settings, and more. It's useful for advanced routing, security headers, or custom build commands.

// vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ]
}