Advanced Vercel Platform

An advanced skill for leveraging Vercel's full platform capabilities including Edge Functions, Edge Middleware, ISR (Incremental Static Regeneration), image optimization, analytics, and multi-region deployment strategies.

When to Use This Skill

Choose this skill when:

• Implementing Edge Functions and Edge Middleware for low-latency responses
• Setting up ISR with on-demand revalidation for content-heavy sites
• Configuring Vercel Image Optimization and OG image generation
• Implementing feature flags and A/B testing at the edge
• Optimizing for Vercel's analytics, speed insights, and web vitals

Consider alternatives when:

• Basic Vercel deployment → use a Vercel deploy skill
• Working with Cloudflare Workers → use a Cloudflare skill
• Need general CDN configuration → use a CDN skill
• Building serverless on AWS → use an AWS Lambda skill

Quick Start

Copy
// Edge Middleware — runs before every request at the edge
// middleware.ts (project root)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

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

  // A/B testing with edge 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;
  }

  // Feature flags
  const flags = request.cookies.get('feature-flags')?.value;
  if (flags?.includes('new-checkout')) {
    return NextResponse.rewrite(new URL('/checkout-v2' + request.nextUrl.search, request.url));
  }

  return NextResponse.next();
}

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

Core Concepts

Vercel Platform Features

Feature	Layer	Latency	Use Case
Edge Middleware	Edge (CDN)	< 1ms	Auth, redirects, A/B tests, geo-routing
Edge Functions	Edge (CDN)	< 50ms	Dynamic content at edge locations
Serverless Functions	Region	50-500ms	API routes, database operations
ISR	CDN + Origin	Cached	Content pages with periodic updates
Static	CDN	< 10ms	Fully static pages and assets
Image Optimization	CDN	Cached	Responsive images, format conversion

ISR with On-Demand Revalidation

Copy
// app/products/[slug]/page.tsx
export const revalidate = 3600; // Revalidate every hour (fallback)

export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { slug: true } });
  return products.map(p => ({ slug: p.slug }));
}

export default async function ProductPage({ params }: { params: { slug: string } }) {
  const product = await db.product.findUnique({ where: { slug: params.slug } });
  if (!product) notFound();
  return <ProductDetail product={product} />;
}

// api/revalidate/route.ts — On-demand revalidation webhook
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request: Request) {
  const { secret, path, tag } = await request.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }

  if (tag) revalidateTag(tag);
  else if (path) revalidatePath(path);

  return Response.json({ revalidated: true, now: Date.now() });
}

OG Image Generation

Copy
// app/api/og/route.tsx — Dynamic Open Graph images
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

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

  return new ImageResponse(
    (
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        justifyContent: 'center', width: '100%', height: '100%',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        color: 'white', fontSize: 48, fontWeight: 'bold',
      }}>
        <div style={{ maxWidth: '80%', textAlign: 'center' }}>{title}</div>
        <div style={{ fontSize: 24, opacity: 0.8, marginTop: 20 }}>example.com</div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Configuration

Parameter	Type	Default	Description
runtime	string	'nodejs'	Function runtime: nodejs or edge
revalidate	number	60	Default ISR revalidation period (seconds)
regions	string[]	['iad1']	Function regions: iad1, sfo1, cdg1, etc.
imageOptimization	boolean	true	Enable Vercel Image Optimization
analytics	boolean	true	Enable Vercel Analytics
speedInsights	boolean	true	Enable Vercel Speed Insights

Best Practices

1. Use Edge Middleware for latency-critical logic — Authentication checks, geo-routing, and A/B testing should happen at the edge (< 1ms) rather than in serverless functions (50-500ms). Middleware runs before the request reaches your application.

2. Implement ISR with on-demand revalidation for content sites — Time-based revalidation (e.g., every hour) is a fallback. Call the revalidation API from your CMS webhook when content changes for instant updates without full rebuilds.

3. Use Edge Functions for personalized content that doesn't need databases — Edge Functions run at CDN locations worldwide for low latency. Use them for content that depends on cookies, headers, or geo location but doesn't require database queries.

4. Generate OG images dynamically instead of creating static ones — Dynamic OG images with ImageResponse create unique social media previews for every page without storing thousands of image files. They're cached at the edge automatically.

5. Configure per-function regions for data locality — Deploy serverless functions in the same region as your database. A function in iad1 (US East) querying a database in eu-west-1 adds 100ms+ of latency to every request.

Common Issues

Edge Functions can't access Node.js APIs — Edge runtime doesn't support fs, path, crypto (full), or most Node.js built-ins. Use Web APIs (fetch, URL, crypto.subtle) and check the Edge runtime compatibility list before using an npm package.

ISR pages show stale content after CMS update — Time-based revalidation has a delay up to the configured period. Implement on-demand revalidation with a webhook from your CMS. Call revalidatePath() or revalidateTag() immediately when content changes.

Middleware runs on every request including static assets — Without a matcher config, middleware processes requests for images, CSS, and other static files. Configure the matcher to exclude _next/static, _next/image, and favicon.ico paths.