// Edge Functions execute at the closest location to users
export async function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';
  const city = request.geo?.city;
  const response = NextResponse.next();
  // Customize response based on user location
  response.headers.set('x-user-country', country);
  response.headers.set('x-user-city', city || 'unknown');
  // Geo-based redirects
  if (country === 'CN' && !request.nextUrl.pathname.startsWith('/cn')) {
    return NextResponse.redirect(new URL('/cn' + request.nextUrl.pathname, request.url));
  }
  return response;
}
export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

// Regional Edge Function configuration
export const config = {
  runtime: 'edge',
  regions: ['iad1'], // US East (Virginia) - close to database
};
export default async function handler(request: Request) {
  // This function runs only in the IAD1 region
  // Optimized for low-latency database access
  const data = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': Bearer ${process.env.API_KEY},
      'X-Region': 'iad1'
    }
  });
  return new Response(JSON.stringify(await data.json()), {
    headers: {
      'content-type': 'application/json',
      'cache-control': 'public, s-maxage=60, stale-while-revalidate=300'
    }
  });
}

// Modern approach: Node.js runtime with streaming
export const runtime = 'nodejs';
export const dynamic = 'force-dynamic';
export async function GET(request: Request) {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      // Stream data chunks as they become available
      for await (const chunk of dataStream()) {
        controller.enqueue(encoder.encode(JSON.stringify(chunk) + '\n'));
      }
      controller.close();
    },
  });
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

Deploy with a single command
npx vercel
Production deployment
npx vercel --prod
Deploy with environment variables
npx vercel --prod -e DATABASE_URL=@production-db-url
Deploy specific directory
npx vercel ./dist --prod
Deploy with custom build command
npx vercel --build-env NEXT_PUBLIC_API_URL=https://api.example.com

Automatic preview URLs for every PR
✓ Preview: https://my-app-git-feature-branch.vercel.app
✓ Production: https://my-app.vercel.app
Share previews with stakeholders
vercel inspect https://my-app-git-feature-branch.vercel.app
Add comments on preview deployments
Team members can comment directly on the deployed preview
Comments are contextual and tied to specific UI elements

List all deployments
vercel ls
Rollback to specific deployment
vercel rollback https://my-app-abc123.vercel.app
Promote preview to production
vercel promote https://my-app-git-staging.vercel.app
Alias a deployment to custom domain
vercel alias https://my-app-abc123.vercel.app custom-domain.com

{
  "git": {
    "deploymentEnabled": {
      "main": true,
      "staging": true,
      "develop": false
    }
  },
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm install",
  "devCommand": "npm run dev",
  "framework": "nextjs",
  "regions": ["iad1", "sfo1", "cdg1"],
  "functions": {
    "api/**/*.ts": {
      "maxDuration": 30,
      "memory": 1024,
      "runtime": "nodejs20.x"
    }
  }
}

// Vercel Postgres integration with edge functions
import { sql } from '@vercel/postgres';
import { NextResponse } from 'next/server';
export const runtime = 'edge';
export const preferredRegion = 'iad1';
export async function GET(request: Request) {
  try {
    const { rows } = await sql
      SELECT
        id,
        email,
        name,
        created_at
      FROM users
      WHERE active = true
      ORDER BY created_at DESC
      LIMIT 100
    ;
    return NextResponse.json({
      users: rows,
      count: rows.length,
      timestamp: new Date().toISOString()
    });
  } catch (error) {
    return NextResponse.json(
      { error: 'Database query failed', details: error.message },
      { status: 500 }
    );
  }
}
// Prepared statements for security
export async function POST(request: Request) {
  const { email, name } = await request.json();
  const result = await sql
    INSERT INTO users (email, name, created_at)
    VALUES (${email}, ${name}, NOW())
    RETURNING id, email, name
  ;
  return NextResponse.json({ user: result.rows[0] });
}
// Transaction support
export async function transferFunds(fromId: number, toId: number, amount: number) {
  const client = await sql.connect();
  try {
    await client.query('BEGIN');
    await client.query(
      'UPDATE accounts SET balance = balance - $1 WHERE id = $2',
      [amount, fromId]
    );
    await client.query(
      'UPDATE accounts SET balance = balance + $1 WHERE id = $2',
      [amount, toId]
    );
    await client.query('COMMIT');
    return { success: true };
  } catch (error) {
    await client.query('ROLLBACK');
    throw error;
  } finally {
    client.release();
  }
}

// Vercel KV integration
import { kv } from '@vercel/kv';
// Simple key-value operations
export async function cacheUserData(userId: string, data: any) {
  await kv.set(user:${userId}, data, {
    ex: 3600, // Expire after 1 hour
  });
}
export async function getUserData(userId: string) {
  return await kv.get(user:${userId});
}
// Advanced Redis operations
export async function trackPageViews(pageId: string) {
  const pipeline = kv.pipeline();
  pipeline.incr(views:${pageId});
  pipeline.zadd('popular:pages', {
    score: Date.now(),
    member: pageId,
  });
  await pipeline.exec();
}
// Pub/Sub for real-time features
export async function publishEvent(channel: string, message: any) {
  await kv.publish(channel, JSON.stringify(message));
}
// Sorted sets for leaderboards
export async function updateLeaderboard(userId: string, score: number) {
  await kv.zadd('leaderboard', {
    score: score,
    member: userId,
  });
  // Get top 10
  const topUsers = await kv.zrange('leaderboard', 0, 9, {
    rev: true,
    withScores: true,
  });
  return topUsers;
}
// Rate limiting with KV
export async function checkRateLimit(userId: string, limit: number = 100) {
  const key = ratelimit:${userId}:${Date.now() / 60000 | 0};
  const count = await kv.incr(key);
  if (count === 1) {
    await kv.expire(key, 60); // Expire after 60 seconds
  }
  return count <= limit;
}

// Vercel Blob storage for file uploads
import { put, list, del, head } from '@vercel/blob';
export async function POST(request: Request) {
  const formData = await request.formData();
  const file = formData.get('file') as File;
  if (!file) {
    return NextResponse.json({ error: 'No file provided' }, { status: 400 });
  }
  // Upload to Blob storage
  const blob = await put(uploads/${file.name}, file, {
    access: 'public',
    addRandomSuffix: true,
    contentType: file.type,
    cacheControlMaxAge: 31536000, // 1 year
  });
  return NextResponse.json({
    url: blob.url,
    pathname: blob.pathname,
    size: blob.size
  });
}
// List all blobs with pagination
export async function listUserUploads(userId: string) {
  const { blobs, cursor, hasMore } = await list({
    prefix: users/${userId}/,
    limit: 100,
  });
  return { blobs, cursor, hasMore };
}
// Delete blob
export async function deleteFile(url: string) {
  await del(url);
}
// Check blob metadata
export async function getFileInfo(url: string) {
  const blob = await head(url);
  return {
    size: blob.size,
    uploadedAt: blob.uploadedAt,
    contentType: blob.contentType,
  };
}
// Multipart upload for large files
export async function uploadLargeFile(file: File) {
  const chunkSize = 5 * 1024 * 1024; // 5MB chunks
  const chunks = Math.ceil(file.size / chunkSize);
  const uploadedParts = [];
  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    const blob = await put(temp/${file.name}-part-${i}, chunk, {
      access: 'public',
    });
    uploadedParts.push(blob.url);
  }
  // Combine parts server-side
  return { parts: uploadedParts, totalParts: chunks };
}

// Edge Config for feature flags
import { get } from '@vercel/edge-config';
export async function middleware(request: NextRequest) {
  const featureFlags = await get('feature-flags');
  if (featureFlags?.newCheckout && Math.random() < 0.5) {
    return NextResponse.rewrite(new URL('/checkout-v2', request.url));
  }
  return NextResponse.next();
}
// A/B testing with Edge Config
export async function getABTestVariant(userId: string, testId: string) {
  const tests = await get('ab-tests');
  const test = tests?.[testId];
  if (!test) return 'control';
  // Consistent hashing for user assignment
  const hash = simpleHash(userId + testId);
  const variant = hash % 100 < test.percentage ? 'variant' : 'control';
  return variant;
}
// Global configuration
export async function getConfig(key: string) {
  return await get(key);
}

// AI SDK 5 with streaming and tool calling
import { openai } from '@ai-sdk/openai';
import { streamText, tool } from 'ai';
import { z } from 'zod';
export async function POST(request: Request) {
  const { messages } = await request.json();
  const result = await streamText({
    model: openai('gpt-4-turbo'),
    messages,
    tools: {
      getWeather: tool({
        description: 'Get weather for a location',
        parameters: z.object({
          location: z.string().describe('City and country'),
        }),
        execute: async ({ location }) => {
          // Tool execution with automatic streaming
          const weather = await fetchWeather(location);
          return {
            temperature: weather.temp,
            condition: weather.condition,
            humidity: weather.humidity,
          };
        },
      }),
      searchDatabase: tool({
        description: 'Search the knowledge base',
        parameters: z.object({
          query: z.string(),
          limit: z.number().default(10),
        }),
        execute: async ({ query, limit }) => {
          const results = await sql
            SELECT * FROM knowledge
            WHERE content LIKE ${%${query}%}
            LIMIT ${limit}
          ;
          return results.rows;
        },
      }),
    },
    maxTokens: 2048,
    temperature: 0.7,
  });
  return result.toAIStreamResponse();
}

// Client-side AI streaming
'use client';
import { useChat } from 'ai/react';
export default function ChatInterface() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
    onResponse: (response) => {
      console.log('Received response:', response);
    },
    onFinish: (message) => {
      console.log('Finished:', message);
    },
    onError: (error) => {
      console.error('Error:', error);
    },
  });
  return (
    

      {messages.map((message) => (
        

          {message.role}: {message.content}

          {/* Display tool calls */}
          {message.toolInvocations?.map((tool, i) => (
            

              Tool: {tool.toolName}
              Result: {JSON.stringify(tool.result)}
            
          ))}
        
      ))}

      

        
        
          Send
        
      
    
  );
}

// AI image generation with streaming progress
import { generateImage } from 'ai';
export async function POST(request: Request) {
  const { prompt } = await request.json();
  const { image, finishReason } = await generateImage({
    model: 'dall-e-3',
    prompt: prompt,
    size: '1024x1024',
    quality: 'hd',
  });
  // Upload generated image to Blob storage
  const blob = await put(generated/${Date.now()}.png, image, {
    access: 'public',
    contentType: 'image/png',
  });
  return NextResponse.json({
    imageUrl: blob.url,
    finishReason,
  });
}

// Security headers and bot protection
export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  // Security headers
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-XSS-Protection', '1; mode=block');
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
  response.headers.set(
    'Permissions-Policy',
    'camera=(), microphone=(), geolocation=()'
  );
  // Strict CSP
  response.headers.set(
    'Content-Security-Policy',
    "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';"
  );
  return response;
}

// Rate limiting and DDoS protection
import { Ratelimit } from '@upstash/ratelimit';
import { kv } from '@vercel/kv';
const ratelimit = new Ratelimit({
  redis: kv,
  limiter: Ratelimit.slidingWindow(10, '10 s'),
  analytics: true,
});
export async function middleware(request: NextRequest) {
  const ip = request.ip ?? '127.0.0.1';
  const { success, limit, reset, remaining } = await ratelimit.limit(ip);
  if (!success) {
    return new Response('Too Many Requests', {
      status: 429,
      headers: {
        'X-RateLimit-Limit': limit.toString(),
        'X-RateLimit-Remaining': remaining.toString(),
        'X-RateLimit-Reset': new Date(reset).toISOString(),
      },
    });
  }
  return NextResponse.next();
}

// Real-time performance monitoring
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }) {
  return (
    
      
        {children}
        
        
      
    
  );
}
// Custom performance tracking
export function reportWebVitals(metric) {
  const analyticsId = process.env.NEXT_PUBLIC_ANALYTICS_ID;
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id,
    label: metric.label,
  });
  const url = https://analytics.example.com/vitals?id=${analyticsId};
  // Use navigator.sendBeacon() if available, falling back to fetch()
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

// Streaming function with incremental updates
export const runtime = 'nodejs';
export async function GET(request: Request) {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      try {
        // Stream database results as they arrive
        const results = await streamDatabaseQuery('SELECT * FROM large_table');
        for await (const row of results) {
          const chunk = encoder.encode(JSON.stringify(row) + '\n');
          controller.enqueue(chunk);
          // Allow other operations to process
          await new Promise(resolve => setTimeout(resolve, 0));
        }
        controller.close();
      } catch (error) {
        controller.error(error);
      }
    },
    cancel() {
      console.log('Stream cancelled by client');
    },
  });
  return new Response(stream, {
    headers: {
      'Content-Type': 'application/x-ndjson',
      'Transfer-Encoding': 'chunked',
      'Cache-Control': 'no-cache',
    },
  });
}

Add custom domain with automatic SSL
vercel domains add example.com
vercel domains add www.example.com
Verify domain ownership
vercel domains verify example.com
Configure DNS
vercel dns add example.com A 76.76.21.21
vercel dns add example.com CNAME cname.vercel-dns.com
SSL certificate is automatically provisioned and renewed

Environment variables per deployment environment
vercel env add DATABASE_URL production
vercel env add DATABASE_URL preview
vercel env add DATABASE_URL development
Pull environment variables locally
vercel env pull .env.local
Link project to Vercel
vercel link
Encrypted environment variables
vercel env add API_SECRET production --sensitive

GitHub Actions integration
name: Deploy to Vercel
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

// Comprehensive logging and monitoring
export default async function handler(req, res) {
  const startTime = Date.now();
  try {
    console.log('Request received:', {
      method: req.method,
      url: req.url,
      headers: req.headers,
      timestamp: new Date().toISOString(),
    });
    // Your application logic
    const result = await processRequest(req);
    const duration = Date.now() - startTime;
    console.log('Request completed:', {
      duration,
      status: 200,
      resultSize: JSON.stringify(result).length,
    });
    res.json({ success: true, data: result });
  } catch (error) {
    const duration = Date.now() - startTime;
    console.error('Request failed:', {
      duration,
      error: error.message,
      stack: error.stack,
    });
    res.status(500).json({
      error: 'Internal server error',
      requestId: req.headers['x-vercel-id']
    });
  }
}

Hobby: Free tier with generous limits
  - 100 GB bandwidth per month
  - Unlimited deployments
  - HTTPS and SSL included
  - Community support
Pro: $20/month per user
  - 1 TB bandwidth per month
  - Commercial use allowed
  - Password protection
  - Analytics included
  - Email support
Team: $40/month per user
  - Centralized billing
  - Team collaboration features
  - Advanced analytics
  - Priority support
  - SAML SSO
Enterprise: Custom pricing
  - Dedicated support
  - SLA guarantees
  - Advanced security
  - Custom contracts
  - 99.99% uptime SLA

// Function execution optimization
export const config = {
  maxDuration: 30, // seconds (default: 10s for Hobby, 60s for Pro)
  memory: 1024, // MB (1024-3008 MB available)
  runtime: 'nodejs20.x', // Use latest Node.js for best performance
};
// Edge caching for cost reduction
export async function GET(request: Request) {
  return new Response(JSON.stringify({ data: 'cached response' }), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  });
}
// Incremental Static Regeneration for optimal caching
export const revalidate = 3600; // Revalidate every hour
export async function generateStaticParams() {
  // Pre-render top 100 pages at build time
  const posts = await getTopPosts(100);
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

Migration checklist
1. Audit current infrastructureAudit current infrastructure
   
- Document all services and dependencies
   - Identify environment variables
   - List custom domains and SSL certificates
2. Update build processesUpdate build processes
   
- Ensure Node.js version compatibility
   - Update build commands for Vercel
   - Configure output directory
3. Configure environment variablesConfigure environment variables
   
- Add all environment variables via Vercel CLI or dashboard
   - Separate development, preview, and production variables
   - Use encrypted variables for secrets
4. Set up custom domainsSet up custom domains
   
- Add domains to Vercel project
   - Update DNS settings
   - Verify SSL certificate provisioning
5. Test deployment pipelineTest deployment pipeline
   
- Deploy to preview environment
   - Run full test suite
   - Verify all integrations work
6. Update DNS settingsUpdate DNS settings
   
- Point domains to Vercel
   - Set appropriate TTL values
   - Monitor for DNS propagation
7. Monitor and optimizeMonitor and optimize
   
- Review analytics and performance metrics
   - Optimize caching strategies
   - Adjust function configurations as needed

// Optimized deployment configuration (vercel.json)
{
  "version": 2,
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/$1",
      "headers": {
        "cache-control": "s-maxage=0"
      }
    },
    {
      "src": "/static/(.*)",
      "headers": {
        "cache-control": "public, max-age=31536000, immutable"
      }
    }
  ],
  "images": {
    "domains": ["example.com", "cdn.example.com"],
    "formats": ["image/webp", "image/avif"],
    "minimumCacheTTL": 31536000
  },
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    }
  ]
}
// Next.js configuration optimization
export default {
  images: {
    domains: ['example.com'],
    formats: ['image/webp', 'image/avif'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
  compress: true,
  poweredByHeader: false,
  generateEtags: true,
  httpAgentOptions: {
    keepAlive: true,
  },
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ['lodash', 'date-fns', 'lucide-react'],
  },
};