Vercel Deployment Optimizer

Quick Start (5-Minute Guide)

1. Install Vercel CLI

# Using pnpm (recommended)
pnpm add -g vercel

# Using npm
npm install -g vercel

# Verify installation
vercel --version

2. Login to Vercel

vercel login

3. Deploy Your Project

# Navigate to your project
cd your-project

# Deploy (interactive setup for first time)
vercel

# Deploy to production
vercel --prod

4. View Your Deployment

# Open in browser
vercel open

Table of Contents

1. Platform Overview
2. Phase 1: Requirements Gathering
3. Phase 2: Platform Setup & Authentication
4. Phase 3: Project Scaffolding
5. Phase 4: Core Features Implementation
6. Phase 5: Testing Setup
7. Phase 6: Deployment Configuration
8. Templates Reference
9. Complete Working Examples
10. Platform API Reference
11. Best Practices
12. Troubleshooting
13. Version History

Platform Overview

What is Vercel?

Vercel is a cloud platform for static sites and serverless functions that enables developers to build, deploy, and scale web applications with zero configuration. It was created by the makers of Next.js and provides first-class support for modern frontend frameworks.

Key Features

Deployment Environments

Vercel provides three default environments:

Pricing Tiers

Phase 1: Requirements Gathering

Before deploying to Vercel, gather the following information:

Project Analysis Checklist

## Project Requirements

### Framework & Runtime
- [ ] Framework: (Next.js, React, Vue, etc.)
- [ ] Node.js version requirement: (20.x recommended)
- [ ] Package manager: (pnpm, npm, yarn)

### Deployment Needs
- [ ] Custom domain required?
- [ ] Preview deployments needed?
- [ ] Multiple environments (staging, production)?

### Function Requirements
- [ ] API routes needed?
- [ ] Expected function duration: (10s, 30s, 60s+)
- [ ] Edge Functions needed for low latency?

### Performance & Monitoring
- [ ] Analytics required?
- [ ] Speed Insights needed?
- [ ] Custom monitoring integration?

### Security & Access
- [ ] Authentication on preview deployments?
- [ ] IP allowlisting needed?
- [ ] Environment variables/secrets count?

Questions to Ask

1. What framework are you using? (Determines optimal configuration)
2. Do you need API routes? (Affects function configuration)
3. What's your expected traffic? (Determines tier requirements)
4. Do you have custom domain(s)? (Requires DNS configuration)
5. Are there environment-specific configurations? (Dev/Preview/Prod)

Phase 2: Platform Setup & Authentication

Installing Vercel CLI

# Global installation with pnpm
pnpm add -g vercel

# Verify installation
vercel --version
# Expected output: Vercel CLI 50.1.3

Authentication Methods

Method 1: Interactive Login

vercel login
# Opens browser for authentication

Method 2: Token-Based (CI/CD)

# Set token as environment variable
export VERCEL_TOKEN=your_token_here

# Or use with command
vercel --token $VERCEL_TOKEN

Linking a Project

# Link to existing Vercel project
vercel link

# Link with specific scope (team)
vercel link --scope your-team

CLI Configuration

Key CLI commands for project management:

# List all projects
vercel ls

# Pull environment variables
vercel env pull

# Add environment variable
vercel env add MY_VAR

# List environments
vercel env ls

# Open project in dashboard
vercel open

Phase 3: Project Scaffolding

Using the Starter Template

This skill includes a complete starter template at templates/starter-app/.

# Copy the template
cp -r templates/starter-app/ my-new-project/
cd my-new-project

# Install dependencies
pnpm install

# Start development
pnpm dev

Project Structure

my-vercel-app/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── api/               # API routes (serverless functions)
│   │   │   ├── health/route.ts
│   │   │   └── data/route.ts
│   │   ├── layout.tsx         # Root layout with Analytics
│   │   ├── page.tsx           # Home page
│   │   └── globals.css        # Global styles
│   ├── components/            # React components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── FeatureCard.tsx
│   ├── lib/                   # Utilities
│   │   └── utils.ts
│   ├── middleware.ts          # Edge middleware
│   └── test/                  # Test setup
├── public/                    # Static assets
├── vercel.json               # Vercel configuration
├── next.config.ts            # Next.js configuration
├── tsconfig.json             # TypeScript configuration
├── package.json              # Dependencies and scripts
├── vitest.config.ts          # Test configuration
└── .env.example              # Environment template

Essential Configuration Files

vercel.json

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "nextjs",
  "regions": ["iad1"],
  "functions": {
    "src/app/api/**/*.ts": {
      "maxDuration": 30,
      "memory": 1024
    }
  },
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Access-Control-Allow-Methods", "value": "GET, POST, PUT, DELETE, OPTIONS" }
      ]
    }
  ],
  "cleanUrls": true,
  "trailingSlash": false
}

next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: '**.vercel.app' },
    ],
    formats: ['image/avif', 'image/webp'],
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'X-Frame-Options', value: 'DENY' },
        ],
      },
    ];
  },
};

export default nextConfig;

Phase 4: Core Features Implementation

4.1 Serverless Functions (API Routes)

Basic API Route (Node.js Runtime)

// src/app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'nodejs';
export const maxDuration = 30;

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const id = searchParams.get('id');

  // Your logic here
  return NextResponse.json({ message: 'Success', id });
}

export async function POST(request: NextRequest) {
  const body = await request.json();

  // Validate and process
  return NextResponse.json({ created: true }, { status: 201 });
}

Edge Function (Ultra-Low Latency)

// src/app/api/geo/route.ts
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const country = request.geo?.country || 'Unknown';
  const city = request.geo?.city || 'Unknown';
  const region = request.geo?.region || 'Unknown';

  return NextResponse.json({
    country,
    city,
    region,
    timestamp: new Date().toISOString(),
  });
}

4.2 Edge Middleware

// src/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Add security headers
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('X-Frame-Options', 'DENY');

  // Add request tracing
  response.headers.set('X-Request-ID', crypto.randomUUID());

  // Geolocation-based logic
  const country = request.geo?.country || 'US';
  response.headers.set('X-Geo-Country', country);

  return response;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

4.3 Analytics & Speed Insights

// src/app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

4.4 Environment Variables

Setting Up Environment Variables

# Add to specific environment
vercel env add DATABASE_URL production

# Add to all environments
vercel env add API_KEY

# Pull to local .env
vercel env pull

Using Environment Variables

// Server-side (API routes, Server Components)
const dbUrl = process.env.DATABASE_URL;

// Client-side (must prefix with NEXT_PUBLIC_)
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Sensitive Environment Variables

Sensitive variables are write-only after creation:

# Mark as sensitive when adding
vercel env add API_SECRET --sensitive

4.5 Fluid Compute Configuration

Fluid Compute provides extended durations and reduced cold starts:

// Enable Fluid Compute benefits
export const runtime = 'nodejs';
export const maxDuration = 300; // Up to 300s on Pro, 800s with Fluid Compute

// Use waitUntil for background tasks
import { waitUntil } from '@vercel/functions';

export async function POST(request: NextRequest) {
  const data = await request.json();

  // Send response immediately
  const response = NextResponse.json({ received: true });

  // Continue processing in background
  waitUntil(async () => {
    await processDataAsync(data);
    await sendNotification(data);
  });

  return response;
}

Phase 5: Testing Setup

Vitest Configuration

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./src/test/setup.ts'],
    include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Test Setup File

// src/test/setup.ts
import '@testing-library/jest-dom/vitest';
import { cleanup } from '@testing-library/react';
import { afterEach, vi } from 'vitest';

afterEach(() => {
  cleanup();
});

// Mock Next.js router
vi.mock('next/navigation', () => ({
  useRouter: () => ({
    push: vi.fn(),
    replace: vi.fn(),
  }),
  usePathname: () => '/',
}));

// Mock Vercel packages
vi.mock('@vercel/analytics/react', () => ({
  Analytics: () => null,
}));

vi.mock('@vercel/speed-insights/next', () => ({
  SpeedInsights: () => null,
}));

Example Component Test

// src/components/Button.test.tsx
import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
  it('renders with text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole('button')).toHaveTextContent('Click me');
  });

  it('calls onClick when clicked', () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click</Button>);

    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledOnce();
  });
});

Running Tests

# Run tests
pnpm test

# Run with coverage
pnpm test:coverage

# Run in watch mode
pnpm test -- --watch

Phase 6: Deployment Configuration

6.1 Git-Based Deployments

Connect your repository for automatic deployments:

1. Go to https://vercel.com/new
2. Import your Git repository
3. Configure build settings (auto-detected for most frameworks)
4. Deploy

6.2 CLI Deployments

# Preview deployment (default)
vercel

# Production deployment
vercel --prod

# Deploy with build output
vercel build && vercel deploy --prebuilt

# Force no cache
vercel --force

6.3 Custom Domains

Adding a Domain

# Add domain via CLI
vercel domains add yourdomain.com

# List domains
vercel domains ls

# Inspect domain
vercel domains inspect yourdomain.com

DNS Configuration

For Apex Domains (example.com):

• Add an A record pointing to 76.76.21.21

For Subdomains (www.example.com):

• Add a CNAME record pointing to cname.vercel-dns.com

Using Vercel Nameservers:

ns1.vercel-dns.com
ns2.vercel-dns.com

6.4 Branch-Based Configuration

// vercel.json
{
  "git": {
    "deploymentEnabled": {
      "main": true,
      "develop": true,
      "staging": true
    }
  }
}

6.5 Monorepo Configuration

// vercel.json at root
{
  "buildCommand": "cd apps/web && pnpm build",
  "outputDirectory": "apps/web/.next",
  "installCommand": "pnpm install",
  "framework": "nextjs"
}

For Turborepo projects:

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    }
  }
}

Templates Reference

Included Template: starter-app

Location: templates/starter-app/

Features:

• Next.js 15 with App Router
• React 19 with Server Components
• TypeScript configuration
• Vercel Analytics integration
• Speed Insights integration
• Edge middleware with security headers
• API routes (health check, data endpoint)
• Vitest testing setup
• ESLint configuration
• Production-ready vercel.json

Build Command: pnpm build Run Command: pnpm dev Output: .next/

Creating Your Own Template

# Create new project
mkdir my-template && cd my-template

# Initialize
pnpm init
pnpm add next react react-dom
pnpm add -D typescript @types/react @types/node

# Add Vercel packages
pnpm add @vercel/analytics @vercel/speed-insights

# Create vercel.json
echo '{"framework":"nextjs"}' > vercel.json

Complete Working Examples

Example 1: Basic API with Edge Function

A simple API that returns geolocation data at the edge.

// src/app/api/location/route.ts
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge';

interface LocationResponse {
  ip: string;
  country: string;
  city: string;
  region: string;
  latitude: number | null;
  longitude: number | null;
  timezone: string;
}

export async function GET(request: NextRequest) {
  const location: LocationResponse = {
    ip: request.headers.get('x-forwarded-for') || 'unknown',
    country: request.geo?.country || 'Unknown',
    city: request.geo?.city || 'Unknown',
    region: request.geo?.region || 'Unknown',
    latitude: request.geo?.latitude ? parseFloat(request.geo.latitude) : null,
    longitude: request.geo?.longitude ? parseFloat(request.geo.longitude) : null,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
  };

  return NextResponse.json(location, {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=300',
    },
  });
}

Example 2: Protected API with Authentication

// src/app/api/protected/route.ts
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'nodejs';

async function validateToken(token: string): Promise<boolean> {
  // Implement your token validation
  return token === process.env.API_SECRET;
}

export async function GET(request: NextRequest) {
  const authHeader = request.headers.get('authorization');

  if (!authHeader?.startsWith('Bearer ')) {
    return NextResponse.json(
      { error: 'Missing authorization header' },
      { status: 401 }
    );
  }

  const token = authHeader.slice(7);
  const isValid = await validateToken(token);

  if (!isValid) {
    return NextResponse.json(
      { error: 'Invalid token' },
      { status: 403 }
    );
  }

  return NextResponse.json({
    message: 'Authenticated successfully',
    data: { secret: 'value' },
  });
}

Example 3: Cron Job with Background Processing

// src/app/api/cron/cleanup/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { waitUntil } from '@vercel/functions';

export const runtime = 'nodejs';
export const maxDuration = 300;

async function performCleanup() {
  // Simulate cleanup task
  console.log('Starting cleanup...');
  await new Promise(resolve => setTimeout(resolve, 5000));
  console.log('Cleanup completed');
}

export async function GET(request: NextRequest) {
  // Verify cron secret
  const authHeader = request.headers.get('authorization');
  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  // Start background task
  waitUntil(performCleanup());

  return NextResponse.json({
    status: 'Cleanup initiated',
    timestamp: new Date().toISOString(),
  });
}

Configure in vercel.json:

{
  "crons": [
    {
      "path": "/api/cron/cleanup",
      "schedule": "0 0 * * *"
    }
  ]
}

Example 4: Dynamic OG Image Generation

// src/app/api/og/route.tsx
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#000',
          color: '#fff',
          fontSize: 60,
          fontWeight: 'bold',
        }}
      >
        {title}
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Example 5: Streaming Response with AI

// src/app/api/chat/route.ts
import { NextRequest } from 'next/server';

export const runtime = 'edge';
export const maxDuration = 30;

export async function POST(request: NextRequest) {
  const { message } = await request.json();

  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      // Simulate streaming response
      const words = `Response to: ${message}`.split(' ');

      for (const word of words) {
        controller.enqueue(encoder.encode(word + ' '));
        await new Promise(r => setTimeout(r, 100));
      }

      controller.close();
    },
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
      'Transfer-Encoding': 'chunked',
    },
  });
}

Example 6: Rate Limiting with Edge Config

// src/app/api/limited/route.ts
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge';

const RATE_LIMIT = 100; // requests per minute
const WINDOW_MS = 60000; // 1 minute

// Simple in-memory store (use Redis/Edge Config in production)
const requestCounts = new Map<string, { count: number; timestamp: number }>();

function isRateLimited(ip: string): boolean {
  const now = Date.now();
  const record = requestCounts.get(ip);

  if (!record || now - record.timestamp > WINDOW_MS) {
    requestCounts.set(ip, { count: 1, timestamp: now });
    return false;
  }

  if (record.count >= RATE_LIMIT) {
    return true;
  }

  record.count++;
  return false;
}

export async function GET(request: NextRequest) {
  const ip = request.headers.get('x-forwarded-for') || 'unknown';

  if (isRateLimited(ip)) {
    return NextResponse.json(
      { error: 'Rate limit exceeded' },
      {
        status: 429,
        headers: {
          'Retry-After': '60',
        },
      }
    );
  }

  return NextResponse.json({ message: 'Success' });
}

Example 7: A/B Testing with Middleware

// src/middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const EXPERIMENT_COOKIE = 'ab-experiment';
const VARIANTS = ['control', 'variant-a', 'variant-b'];

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Check for existing experiment cookie
  let variant = request.cookies.get(EXPERIMENT_COOKIE)?.value;

  if (!variant || !VARIANTS.includes(variant)) {
    // Assign random variant
    variant = VARIANTS[Math.floor(Math.random() * VARIANTS.length)];
    response.cookies.set(EXPERIMENT_COOKIE, variant, {
      maxAge: 60 * 60 * 24 * 30, // 30 days
      httpOnly: true,
    });
  }

  // Add variant header for analytics
  response.headers.set('X-Experiment-Variant', variant);

  return response;
}

export const config = {
  matcher: ['/'],
};

Example 8: Multi-Region Deployment

// vercel.json
{
  "regions": ["iad1", "sfo1", "cdg1", "hnd1"],
  "functions": {
    "src/app/api/global/**/*.ts": {
      "runtime": "edge"
    },
    "src/app/api/us/**/*.ts": {
      "regions": ["iad1", "sfo1"]
    },
    "src/app/api/eu/**/*.ts": {
      "regions": ["cdg1", "lhr1"]
    }
  }
}

Platform API Reference

vercel.json Configuration

Function Configuration Options

interface FunctionConfig {
  runtime?: 'nodejs' | 'edge';
  maxDuration?: number;      // Max execution time in seconds
  memory?: 128 | 256 | 512 | 1024 | 2048 | 3008; // Memory in MB
  regions?: string[];        // Specific regions
}

Available Regions

CLI Commands Reference

Best Practices

1. Performance Optimization

// Use Edge Runtime for low-latency APIs
export const runtime = 'edge';

// Enable ISR for semi-static content
export const revalidate = 3600; // Revalidate every hour

// Use dynamic imports for code splitting
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Loading />,
});

2. Security Headers

// next.config.ts
async headers() {
  return [
    {
      source: '/(.*)',
      headers: [
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'X-Frame-Options', value: 'DENY' },
        { key: 'X-XSS-Protection', value: '1; mode=block' },
        { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
      ],
    },
  ];
}

3. Environment Variable Management

# Use different values per environment
vercel env add DATABASE_URL production
vercel env add DATABASE_URL preview
vercel env add DATABASE_URL development

# Mark sensitive values
vercel env add API_SECRET production --sensitive

4. Caching Strategy

// Static caching
export async function GET() {
  return Response.json(data, {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  });
}

// No cache for dynamic data
export const dynamic = 'force-dynamic';
export const revalidate = 0;

5. Error Handling

export async function GET() {
  try {
    const data = await fetchData();
    return Response.json(data);
  } catch (error) {
    console.error('API Error:', error);
    return Response.json(
      { error: 'Internal server error' },
      { status: 500 }
    );
  }
}

6. Logging and Monitoring

// Use structured logging
console.log(JSON.stringify({
  level: 'info',
  message: 'Request processed',
  requestId: request.headers.get('x-request-id'),
  duration: Date.now() - startTime,
}));

7. Cold Start Reduction

// Use Fluid Compute
export const runtime = 'nodejs';

// Lazy load heavy dependencies
let heavyModule: typeof import('heavy-module') | null = null;

async function getHeavyModule() {
  if (!heavyModule) {
    heavyModule = await import('heavy-module');
  }
  return heavyModule;
}

8. Cost Optimization

• Use Edge Functions for simple, fast operations
• Set appropriate maxDuration to avoid unexpected costs
• Use waitUntil for background tasks
• Implement proper caching to reduce function invocations
• Monitor usage in the Vercel dashboard

Troubleshooting

Issue 1: Build Fails with SIGKILL/OOM

Symptoms: Build fails without clear error, mentions SIGKILL or out of memory.

Solutions:

# Clear build cache
vercel --force

# Or set environment variable
VERCEL_FORCE_NO_BUILD_CACHE=1

# Increase Node.js memory
NODE_OPTIONS="--max-old-space-size=6144" pnpm build

For Pro/Enterprise:

• Enable Enhanced Builds in project settings (16GB memory, 8 CPUs)

Issue 2: Function Timeout

Symptoms: API returns 504 Gateway Timeout.

Solutions:

// Increase maxDuration
export const maxDuration = 60; // Up to 60s on Hobby

// Use Edge Runtime for simple operations
export const runtime = 'edge';

// Use streaming for long operations
return new Response(stream);

Issue 3: Environment Variables Not Working

Symptoms: process.env.VAR returns undefined.

Solutions:

# Pull latest env vars
vercel env pull

# Verify variable exists
vercel env ls

# Redeploy after adding vars
vercel --prod

For client-side variables, prefix with NEXT_PUBLIC_:

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Issue 4: Domain Not Verifying

Symptoms: Domain shows "Invalid Configuration" or verification pending.

Solutions:

1. Check for conflicting DNS records
2. Wait for DNS propagation (can take up to 48 hours)
3. Verify correct record type (A for apex, CNAME for subdomain)

# Check DNS records
dig +short yourdomain.com A
dig +short www.yourdomain.com CNAME

# Inspect domain in Vercel
vercel domains inspect yourdomain.com

Issue 5: Preview Deployments Not Working

Symptoms: Push to branch doesn't trigger deployment.

Solutions:

Check vercel.json:

{
  "git": {
    "deploymentEnabled": {
      "main": true,
      "develop": true,
      "feature-*": true
    }
  }
}

Verify GitHub app permissions and webhook connectivity.

Issue 6: Slow Cold Starts

Symptoms: First request after idle period is slow.

Solutions:

// Enable Fluid Compute (Pro/Enterprise)
// - Reduces cold starts with bytecode caching
// - Enables function reuse

// Minimize bundle size
import { specific } from 'large-package'; // Not: import * as pkg

// Use dynamic imports
const Module = await import('heavy-module');

Issue 7: CORS Errors

Symptoms: Browser blocks API requests with CORS error.

Solutions:

// Option 1: In API route
export async function GET() {
  return Response.json(data, {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

// Option 2: Handle OPTIONS preflight
export async function OPTIONS() {
  return new Response(null, {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  });
}

Or in vercel.json:

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    }
  ]
}

Version History

Vercel CLI 50.x (December 2025)

• 50.1.3 (Current): Improved vercel.ts support, Python builder improvements
• 50.0.0: Major release with improved environment variable handling, masked input, interactive project selector

Key Platform Updates 2025

Next.js Compatibility

Additional Resources

Official Documentation

• Vercel Documentation
• Next.js on Vercel
• Vercel CLI Reference
• Vercel Functions

Learning Resources

• Vercel Academy
• Production Monorepos Course

Community

• Vercel Community
• GitHub Issues
• Vercel Changelog

Skill Usage Examples

When to Use This Skill

1. User says: "Deploy my Next.js app to Vercel"

   • Use this skill to guide through deployment

2. User says: "Configure Edge Functions for my API"

   • Reference Phase 4.1 and 4.2

3. User says: "Set up custom domain on Vercel"

   • Reference Phase 6.3

4. User says: "My Vercel build is failing"

   • Reference Troubleshooting section

5. User says: "Optimize my Vercel deployment"

   • Reference Best Practices section

6. User says: "Set up Vercel Analytics"

   • Reference Phase 4.3

7. User says: "Configure environment variables"

   • Reference Phase 4.4

8. User says: "Set up a monorepo on Vercel"

   • Reference Phase 6.5

Last Updated: December 2025 Vercel CLI Version: 50.1.3 Next.js Version: 15.1.0