Website deployment setup on Vercel

Configuring Website Deployment on Vercel

Vercel is a platform for deploying frontend applications and Serverless Functions. Native Next.js integration (one-click deployment), automatic Preview Deployments for each PR, global CDN.

Connecting Your Project

# Install CLI
npm install -g vercel

# Deploy from current directory
vercel

# Deploy with options
vercel --prod          # production
vercel --env preview   # staging

vercel.json

{
    "buildCommand": "npm run build",
    "outputDirectory": "dist",
    "installCommand": "npm ci",
    "framework": "vite",

    "rewrites": [
        { "source": "/api/(.*)", "destination": "https://api.example.com/$1" },
        { "source": "/(.*)", "destination": "/index.html" }
    ],

    "headers": [
        {
            "source": "/(.*)",
            "headers": [
                { "key": "X-Frame-Options", "value": "DENY" },
                { "key": "X-Content-Type-Options", "value": "nosniff" },
                { "key": "Strict-Transport-Security", "value": "max-age=31536000; includeSubDomains" }
            ]
        },
        {
            "source": "/assets/(.*)",
            "headers": [
                { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
            ]
        }
    ],

    "regions": ["fra1", "iad1"]
}

Serverless Functions

// api/contact.ts (Vercel Edge Function)
import type { VercelRequest, VercelResponse } from '@vercel/node';

export default async function handler(req: VercelRequest, res: VercelResponse) {
    if (req.method !== 'POST') {
        return res.status(405).json({ error: 'Method not allowed' });
    }

    const { name, email, message } = req.body;

    // Send via Resend
    const response = await fetch('https://api.resend.com/emails', {
        method: 'POST',
        headers: {
            Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            from: '[email protected]',
            to: '[email protected]',
            subject: `New message from ${name}`,
            html: `<p>${message}</p>`,
        }),
    });

    return res.status(response.ok ? 201 : 500).json({ ok: response.ok });
}

GitHub Actions for Vercel

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: ${{ github.event_name == 'push' && '--prod' || '' }}

Environment Variables

# Add via CLI
vercel env add DATABASE_URL production
vercel env add API_KEY preview

# View
vercel env ls

In Vercel Dashboard → Project → Settings → Environment Variables. Different values for Production, Preview, Development.

Preview Deployments

Each PR automatically gets a unique URL like myapp-git-feature-branch-org.vercel.app. Useful for design review and QA testing. Can add Basic Auth to preview environments:

{
    "authentication": {
        "password": "preview-password"
    }
}

Vercel Limitations

• Serverless Functions: max 10 seconds execution (Pro: 60 sec)
• Not suitable for apps with persistent connections (WebSocket) — use Edge Runtime or separate server
• Backend on PHP/Laravel — not available (only Node.js/Python/Go via Serverless)

Implementation Timeline

Connecting Next.js/React project to Vercel: 4–8 hours including variable and domain setup.