Vercel Data Handling

Overview

Handle sensitive data correctly on Vercel: PII redaction in logs, GDPR-compliant data processing in serverless functions, secure cookie management, and data residency configuration. Covers both what Vercel stores and what your application should protect.

Prerequisites

• Understanding of GDPR/CCPA requirements
• Vercel Pro or Enterprise (for data residency options)
• Logging infrastructure with PII awareness

Instructions

Step 1: Understand What Vercel Stores

Step 2: PII Redaction in Logs

// lib/redact.ts — redact PII before logging
const PII_PATTERNS: [RegExp, string][] = [
  [/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b/g, '[EMAIL]'],
  [/\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g, '[PHONE]'],
  [/\b\d{3}-\d{2}-\d{4}\b/g, '[SSN]'],
  [/\b\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}\b/g, '[CARD]'],
  [/\b(?:Bearer|token|key|secret|password)\s*[:=]\s*\S+/gi, '[CREDENTIAL]'],
];

export function redact(text: string): string {
  let result = text;
  for (const [pattern, replacement] of PII_PATTERNS) {
    result = result.replace(pattern, replacement);
  }
  return result;
}

// Usage — always redact before console.log
import { redact } from '@/lib/redact';

export async function POST(request: Request) {
  const body = await request.json();
  console.log('Request received:', redact(JSON.stringify(body)));
  // Process safely...
}

Step 3: GDPR-Compliant API Routes

// api/users/[id]/route.ts — data subject request handlers
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/db';

// Right to Access (GDPR Art. 15)
export async function GET(
  request: NextRequest,
  { params }: { params: { id: string } }
) {
  const user = await db.user.findUnique({
    where: { id: params.id },
    include: { posts: true, preferences: true },
  });

  if (!user) return NextResponse.json({ error: 'Not found' }, { status: 404 });

  return NextResponse.json({
    personalData: {
      name: user.name,
      email: user.email,
      createdAt: user.createdAt,
      posts: user.posts,
      preferences: user.preferences,

Vercel Debug Bundle

Overview

Collect a comprehensive debug bundle containing deployment state, function logs, environment configuration, and build output for Vercel support escalation or team troubleshooting.

Current State

!vercel --version 2>/dev/null || echo 'Vercel CLI not installed'

!node --version 2>/dev/null || echo 'Node.js N/A'

Prerequisites

• Vercel CLI installed and authenticated
• Access to the affected deployment
• jq for JSON processing (recommended)

Instructions

Step 1: Collect Deployment Information

#!/usr/bin/env bash
set -euo pipefail

DEPLOY_URL="${1:-$(vercel ls --json 2>/dev/null | jq -r '.[0].url')}"
BUNDLE_DIR="vercel-debug-$(date +%Y%m%d-%H%M%S)"
mkdir -p "$BUNDLE_DIR"

echo "=== Collecting debug bundle for: $DEPLOY_URL ==="

# Deployment inspection
vercel inspect "$DEPLOY_URL" > "$BUNDLE_DIR/inspect.txt" 2>&1 || true

# Deployment details via API
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v13/deployments/$DEPLOY_URL" \
  | jq '{uid, name, state, target, readyState, errorMessage, meta, regions}' \
  > "$BUNDLE_DIR/deployment.json" 2>/dev/null || true

Step 2: Collect Function Logs

# Recent function logs (last 100 entries)
vercel logs "$DEPLOY_URL" --output=short --limit=100 \
  > "$BUNDLE_DIR/function-logs.txt" 2>&1 || true

# Function logs via API with filtering
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v2/deployments/$DEPLOY_URL/events?limit=100&direction=backward" \
  | jq '.[] | {timestamp: .created, type, text}' \
  > "$BUNDLE_DIR/events.json" 2>/dev/null || true

Step 3: Collect Build Output

# Build logs
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v13/deployments/$DEPLOY_URL" \
  | jq '.build' > "$BUNDLE_DIR/build-info.json" 2>/dev/null || true

# List all functions in the deployment
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v13/deployments/$DEPLOY_URL" \
  | jq '.routes, .functions' > "$BUNDLE_DIR/routes-functions.json" 2>/dev/null || true

Step 4: Collect Environment State (Redacted)

# Environment variable names only (no values)
vercel env ls > "$BUNDLE_DIR/env-vars-list.txt" 2>&1 || true

# Project configuration (redacted)
if [ -f "vercel.json" ]; then
  cp vercel.json "$BUNDLE_DIR/vercel.json"
fi

# Package versions
if [ -f "pac

Vercel Deploy Integration

Overview

Deploy Vercel applications to production using CLI, API, and Git-triggered workflows. Covers deployment promotion, instant rollback, rolling releases, multi-region function configuration, and deploy hooks for headless CMS integration.

Prerequisites

• Vercel project linked and configured
• Production environment variables set
• Custom domain configured (optional)
• VERCEL_TOKEN for API-based deployments

Instructions

Step 1: Production Deploy Methods

# Method 1: CLI direct production deploy
vercel --prod

# Method 2: Promote a preview deployment to production
vercel promote https://my-app-preview-xxx.vercel.app

# Method 3: API-based deployment
curl -X POST "https://api.vercel.com/v13/deployments" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "my-app",
    "target": "production",
    "gitSource": {
      "type": "github",
      "repoId": "123456789",
      "ref": "main",
      "sha": "'$(git rev-parse HEAD)'"
    }
  }'

# Method 4: Deploy Hook (for CMS-triggered rebuilds)
curl -X POST "https://api.vercel.com/v1/integrations/deploy/prj_xxx/hook_xxx"

Step 2: Instant Rollback

# Roll back to the previous production deployment (no rebuild)
vercel rollback

# Roll back to a specific deployment
vercel rollback dpl_xxxxxxxxxxxx

# Verify the rollback
vercel ls --prod
curl -s https://yourdomain.com/api/health | jq .

# Via API — promote a known-good deployment
curl -X POST "https://api.vercel.com/v9/projects/my-app/promote" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"deploymentId": "dpl_known_good_id"}'

Key points:

• Instant rollback swaps production traffic without rebuilding
• The rolled-back deployment retains its original environment variables
• All production domains immediately point to the rolled-back deployment

Step 3: Rolling Releases (Gradual Rollout)

Configure rolling releases in the dashboard under Settings > Rolling Releases:

// vercel.json — rolling release config
{
  "rollingRelease": {
    "enabled": true,
    "stages": [
      { "targetPercentage": 10, "duration": 300 },
      { "targetPercentage": 50, "duration": 600 },
      { "targetPercentage": 100 }
    ]
  }
}

This routes 10% of traffic to the new deployment for 5 minutes, then 50% for 10 minutes, then 100%. If

Vercel Edge Functions

Overview

Edge Functions run on Vercel's Edge Network (V8 isolates) close to the user with no cold starts. They use Web Standard APIs (Request, Response, fetch) instead of Node.js APIs. Ideal for authentication, A/B testing, geolocation routing, and low-latency API responses.

Prerequisites

• Completed vercel-install-auth setup
• Familiarity with Web APIs (Request/Response)
• Node.js 18+ for local development

Instructions

Step 1: Create an Edge Function

// api/edge-hello.ts
// Export `runtime = 'edge'` to run on the Edge Runtime
export const config = { runtime: 'edge' };

export default function handler(request: Request): Response {
  return new Response(
    JSON.stringify({
      message: 'Hello from the Edge!',
      region: request.headers.get('x-vercel-ip-city') ?? 'unknown',
      timestamp: Date.now(),
    }),
    {
      status: 200,
      headers: { 'Content-Type': 'application/json' },
    }
  );
}

Step 2: Edge Function with Geolocation

Vercel injects geolocation headers into every edge request:

// api/geo.ts
export const config = { runtime: 'edge' };

export default function handler(request: Request): Response {
  const city = request.headers.get('x-vercel-ip-city') ?? 'unknown';
  const country = request.headers.get('x-vercel-ip-country') ?? 'unknown';
  const region = request.headers.get('x-vercel-ip-country-region') ?? 'unknown';
  const latitude = request.headers.get('x-vercel-ip-latitude');
  const longitude = request.headers.get('x-vercel-ip-longitude');

  return Response.json({
    city: decodeURIComponent(city),
    country,
    region,
    coordinates: latitude && longitude ? { lat: latitude, lng: longitude } : null,
  });
}

Step 3: Edge Middleware (middleware.ts)

Middleware runs before every request and can rewrite, redirect, or add headers:

// middleware.ts (must be at project root or src/)
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  // Example 1: Redirect based on country
  const country = request.geo?.country ?? 'US';
  if (country === 'DE') {
    return NextResponse.redirect(new URL('/de', request.url));
  }

  // Example 2: A/B testing with cookies
  const bucket = request.cookies.get('ab-bucket')?.value;
  if (!bucket) {
    const response = NextResponse.next();
    response.cookies.set('ab-bucket', Math.random() > 0.5 ? 'a' : 'b');
    return response;
  }

  // Example 3: Add security headers
  const response = NextResponse.next();
  response.headers.set('X-Frame-Options&

Vercel Enterprise RBAC

Overview

Configure Vercel's role-based access control (RBAC) with team roles, project-level access groups, SSO/SAML integration, and audit logging. Covers the two access control planes: team-level (who can deploy) and application-level (who can access deployed content).

Prerequisites

• Vercel Pro or Enterprise plan
• Identity Provider (IdP) with SAML 2.0 support (for SSO)
• Understanding of your organization's access requirements

Instructions

Step 1: Understand Vercel's Role Model

Team-Level Roles:

Extended Permissions (Enterprise):

Layer on top of base roles for granular control:

• Deploy to production
• Manage environment variables
• Manage domains
• Access runtime logs
• Manage integrations

Step 2: Configure Team Members via API

# Invite a team member
curl -X POST "https://api.vercel.com/v1/teams/team_xxx/members" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "email": "developer@company.com",
    "role": "DEVELOPER"
  }'

# List team members
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v2/teams/team_xxx/members" \
  | jq '.members[] | {name: .name, email: .email, role: .role}'

# Update a member's role
curl -X PATCH "https://api.vercel.com/v1/teams/team_xxx/members/user_xxx" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"role": "MEMBER"}'

# Remove a team member
curl -X DELETE "https://api.vercel.com/v1/teams/team_xxx/members/user_xxx" \
  -H "Authorization: Bearer $VERCEL_TOKEN"

Step 3: Access Groups (Project-Level Permissions)

Access Groups assign teams of people to specific projects with specific roles:

1. Go to Team Settings > Access Groups
2. Create a group (e.g., "Frontend Team", "Backend Team")
3. Add members to the group
4. Assign the group to specific projects with a role

Example Access Group Setup

Vercel Hello World

Overview

Deploy a minimal project to Vercel with a static page and a serverless API route. Confirms your CLI auth, project structure, and deployment pipeline work end to end.

Prerequisites

• Completed vercel-install-auth setup
• Vercel CLI installed and authenticated
• Node.js 18+

Instructions

Step 1: Create Project Structure

mkdir my-vercel-app && cd my-vercel-app
npm init -y

Create the static landing page:

<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head><title>Hello Vercel</title></head>
<body>
  <h1>Hello from Vercel</h1>
  <p id="result">Loading...</p>
  <script>
    fetch('/api/hello')
      .then(r => r.json())
      .then(d => document.getElementById('result').textContent = d.message);
  </script>
</body>
</html>

Step 2: Create Serverless API Route

// api/hello.ts
import type { VercelRequest, VercelResponse } from '@vercel/node';

export default function handler(req: VercelRequest, res: VercelResponse) {
  res.status(200).json({
    message: 'Hello from Vercel Serverless Function!',
    timestamp: new Date().toISOString(),
    region: process.env.VERCEL_REGION || 'local',
  });
}

Install the types:

npm install --save-dev @vercel/node typescript

Step 3: Add vercel.json Configuration

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "s-maxage=0, stale-while-revalidate" }
      ]
    }
  ]
}

Step 4: Deploy Preview

# Deploy to a preview URL (not production)
vercel

# Output:
# Vercel CLI 39.x.x
# 🔗 Linked to your-team/my-vercel-app
# 🔍 Inspect: https://vercel.com/your-team/my-vercel-app/xxx
# ✅ Preview: https://my-vercel-app-xxx.vercel.app

Step 5: Test the Deployment

# Test static page
curl -s https://my-vercel-app-xxx.vercel.app/ | head -5

# Test API route
curl -s https://my-vercel-app-xxx.vercel.app/api/hello | jq .
# {
#   "message": "Hello from Vercel Serverless Function!",
#   "timestamp": "2026-03-22T12:00:00.000Z",
#   "region": "iad1"
# }

Step 6: Promote to Production

# Deploy directly to production
vercel --prod

# Or promote the preview dep

Vercel Incident Runbook

Overview

Step-by-step incident response for Vercel deployment failures, function errors, and platform outages. Covers rapid triage, instant rollback, communication templates, and postmortem procedures.

Prerequisites

• Access to Vercel dashboard and CLI
• Access to Vercel status page (vercel-status.com)
• Communication channels (Slack, PagerDuty) configured
• Log drain or runtime log access

Instructions

Step 1: Rapid Triage (First 5 Minutes)

# 1. Check if it's a Vercel platform issue
curl -s "https://www.vercel-status.com/api/v2/summary.json" \
  | jq '.status.description, [.components[] | select(.status != "operational") | {name, status}]'

# 2. Check current production deployment status
vercel ls --prod
vercel inspect $(vercel ls --prod --json | jq -r '.[0].url')

# 3. Check recent deployments — did a deploy just happen?
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v6/deployments?target=production&limit=5&projectId=prj_xxx" \
  | jq '.deployments[] | {uid, state, createdAt: (.createdAt/1000 | todate), url}'

# 4. Check function logs for errors
vercel logs $(vercel ls --prod --json | jq -r '.[0].url') --level=error --limit=20

Step 2: Decision Tree

Is vercel-status.com showing an incident?
├── YES → Vercel platform issue
│   ├── Subscribe to updates on status page
│   ├── Post internal status: "Vercel platform incident — monitoring"
│   └── No action needed from us — wait for Vercel resolution
│
└── NO → Issue is in our deployment
    ├── Did a deployment happen in the last 30 minutes?
    │   ├── YES → Likely deployment regression
    │   │   └── ROLLBACK immediately (Step 3)
    │   └── NO → Application-level issue
    │       ├── Check function logs for new errors
    │       ├── Check external dependency status (DB, APIs)
    │       └── Investigate and hotfix (Step 4)
    │
    └── Is the issue region-specific?
        ├── YES → Check function regions, possible edge issue
        └── NO → Global issue, check code and env vars

Step 3: Instant Rollback (< 30 Seconds)

# Option A: Rollback to previous production deployment (fastest)
vercel rollback
# This instantly swaps production traffic — no rebuild needed

# Option B: Rollback to a specific known-good deployment
vercel rollback dpl_xxxxxxxxxxxx

# Option C: Via API (for automation/PagerDuty integration)
curl -X POST "https://api.vercel.com/v9/projects/my-app/promote" \
  -H "Authorization: Bearer $VERCEL_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"deploymentId": "dpl_known_good_id"}'

# Verify rollback succeeded
vercel ls --prod
curl -s https://yourdomain.com/api/health | 

Vercel Install & Auth

Overview

Install the Vercel CLI, create a scoped access token, and link your local project to a Vercel project. This skill covers both interactive login and headless CI token authentication via the REST API.

Prerequisites

• Node.js 18+ installed
• npm, pnpm, or yarn available
• A Vercel account (hobby, pro, or enterprise)

Instructions

Step 1: Install Vercel CLI

set -euo pipefail
# Global install (recommended)
npm install -g vercel@latest

# Or project-local
npm install --save-dev vercel@latest

# Verify installation
vercel --version

Step 2: Authenticate — Interactive Login

# Opens browser for OAuth login, stores token in ~/.config/com.vercel.cli
vercel login

# Or login with a specific email
vercel login your@email.com

# Login with GitHub
vercel login --github

# Login with GitLab
vercel login --gitlab

Step 3: Authenticate — Headless Token (CI/CD)

Create a token in the Vercel dashboard at Settings > Tokens or via the API:

# Use a pre-created token — set as environment variable
export VERCEL_TOKEN="your-access-token-here"

# The CLI reads VERCEL_TOKEN automatically — no login needed
vercel whoami
# Output: your-username

# Scope the token to a specific team
export VERCEL_ORG_ID="team_xxxxxxxxxxxx"
export VERCEL_PROJECT_ID="prj_xxxxxxxxxxxx"

Step 4: Link Local Project

# Interactive — walks you through project selection
vercel link

# Or link to a specific project by name
vercel link --project my-project-name

# Verify the link — pulls .vercel/project.json
cat .vercel/project.json
# {"orgId":"team_xxx","projectId":"prj_xxx"}

Step 5: Verify Connection via REST API

# Test token against the REST API directly
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  https://api.vercel.com/v9/projects | jq '.projects[].name'

# List teams
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  https://api.vercel.com/v2/teams | jq '.teams[].name'

Step 6: Pull Environment Variables

# Pull remote env vars to local .env.development.local
vercel env pull .env.development.local

# Pull for a specific environment
vercel env pull --environment=preview

Token Scopes Reference