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

| Runtime | Use Case | Cold Start |
|---------|----------|------------|
| Node.js | Default, full API | ~250ms |
| Edge | Low latency, global | ~0ms |
| Python | ML, data processing | ~500ms |

### Functions

```typescript
// 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:

Reference	When to Use
`references/ai/sdk.md`	AI SDK, streaming, tool calling
`references/ai/agents.md`	Building AI agents
`references/deployment/config.md`	vercel.json, environments
`references/deployment/functions.md`	Serverless & Edge functions
`references/storage/kv-postgres.md`	Vercel KV, Postgres, Blob
`references/sources.md`	Authoritative sources

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

vercel

Vercel

Quick Reference

Vercel CLI