Vercel

The AI Cloud platform for deploying web applications and AI-powered agents.

Quick Reference

Vercel CLI

# Install
npm i -g vercel

# Deploy
vercel                    # Deploy to preview
vercel --prod             # Deploy to production

# Environment variables
vercel env pull           # Pull env vars to .env.local
vercel env add NAME       # Add env var

# Link project
vercel link               # Link to existing project

# Logs
vercel logs [url]         # View function logs

Project Structure (Next.js)

my-app/
├── app/                  # App Router
│   ├── layout.tsx
│   ├── page.tsx
│   ├── api/              # API routes (Route Handlers)
│   │   └── chat/route.ts
│   └── actions.ts        # Server Actions
├── public/
├── next.config.js
├── vercel.json           # Vercel config (optional)
└── package.json

Core Concepts

Deployment Flow

Git Push → Build → Deploy → Preview URL
                      ↓
                 Production (on merge to main)

Runtimes

Functions

// app/api/hello/route.ts (Route Handler)
export async function GET(request: Request) {
  return Response.json({ message: 'Hello' });
}

// Edge Function
export const runtime = 'edge';
export async function GET(request: Request) {
  return new Response('Hello from Edge');
}

References

Load these as needed:

AI SDK Quick Start

import { generateText, streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

// Generate text
const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: 'Explain quantum computing',
});

// Stream text
const result = streamText({
  model: openai('gpt-4o'),
  prompt: 'Write a poem',
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Edge Functions

Best for:

• Low latency (0ms cold start)
• Geolocation/personalization
• A/B testing
• Authentication

// middleware.ts (runs on Edge by default)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Geo-based redirect
  const country = request.geo?.country || 'US';
  if (country === 'DE') {
    return NextResponse.redirect(new URL('/de', request.url));
  }
  return NextResponse.next();
}

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

Vercel Storage

// Vercel KV (Redis-compatible)
import { kv } from '@vercel/kv';

await kv.set('user:1', { name: 'Alice' });
const user = await kv.get('user:1');

// Vercel Postgres
import { sql } from '@vercel/postgres';

const { rows } = await sql`SELECT * FROM users WHERE id = ${userId}`;

// Vercel Blob
import { put } from '@vercel/blob';

const blob = await put('image.png', file, { access: 'public' });
console.log(blob.url);

Environment Variables

# .env.local (local development)
DATABASE_URL=postgres://...
OPENAI_API_KEY=sk-...

# vercel.json (per-environment)
{
  "env": {
    "MY_VAR": "value"
  }
}

Access in code:

const apiKey = process.env.OPENAI_API_KEY;

Common Patterns

ISR (Incremental Static Regeneration)

// app/posts/[id]/page.tsx
export const revalidate = 60; // Revalidate every 60 seconds

// Or on-demand
import { revalidatePath } from 'next/cache';
revalidatePath('/posts');

Streaming AI Response

// app/api/chat/route.ts
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

Debugging

# Local development
vercel dev

# View logs
vercel logs https://my-app.vercel.app

# Check build output
vercel build

More Information

• Vercel Docs
• AI SDK Docs
• Next.js Docs
• v0