Vercel Edge Functions Usage Guide dengan Claude Code

Vercel Edge Functions dengan Claude Code: implementasi

Vercel Edge Functions 、世界中 エッジロケーション コード 実行 きるserverless環境.cold start ほぼ tidak 、pengguna 近い場所 pemrosesan 行える untuk 、超低レイテンシーなAPIやmiddleware pembangunan bisa dilakukan.Claude Code 使えば、Edge Runtime特有 batasan 考慮 implementasi juga スムーズ 進められ.

implementasi Middleware

> Next.js Middleware dengan 認証チェック dan 地理ベース 
> routing implementasikan.

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

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

export function middleware(request: NextRequest) {
  const { pathname, searchParams } = request.nextUrl;
  const geo = request.geo;

  // 認証チェック
  const token = request.cookies.get('session-token')?.value;
  if (pathname.startsWith('/dashboard') && !token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 地理ベース routing
  if (pathname === '/' && geo?.country) {
    const country = geo.country;
    if (country === 'JP') {
      return NextResponse.rewrite(new URL('/ja', request.url));
    }
  }

  // セキュリティheader penambahan
  const response = NextResponse.next();
  response.headers.set('X-Frame-Options', 'DENY');
  response.headers.set('X-Content-Type-Options', 'nosniff');
  response.headers.set(
    'Strict-Transport-Security',
    'max-age=31536000; includeSubDomains'
  );

  return response;
}

pembuatan Edge API Route

> Edge Runtime dengan 動作するAPIendpoint buatkan.
> KVstore 使ったレート制限 implementasikan juga.

// app/api/data/route.ts
export const runtime = 'edge';

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

  // レート制限チェック
  const ip = request.headers.get('x-forwarded-for') || 'unknown';
  const isAllowed = await checkRateLimit(ip);
  if (!isAllowed) {
    return new Response(
      JSON.stringify({ error: 'Rate limit exceeded' }),
      { status: 429, headers: { 'Content-Type': 'application/json' } }
    );
  }

  // Edge KVからデータpengambilan
  const data = await fetchData(query);

  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 's-maxage=60, stale-while-revalidate=300',
    },
  });
}

async function checkRateLimit(ip: string): Promise<boolean> {
  // Vercel KV（Upstash Redis） penggunaan
  const key = `rate-limit:${ip}`;
  const kv = await import('@vercel/kv');
  const current = await kv.default.incr(key);

  if (current === 1) {
    await kv.default.expire(key, 60); // 60秒ウィンドウ
  }

  return current <= 100; // 60秒あたり100request
}

implementasi A/Btest

> Edge Functions dengan A/Btest routing implementasikan.
> Cookieベース バケット割り当て dengan 。

// middleware.ts (A/Btest部分)
function abTest(request: NextRequest): NextResponse {
  const bucket = request.cookies.get('ab-bucket')?.value;
  let variant: 'a' | 'b';

  if (bucket === 'a' || bucket === 'b') {
    variant = bucket;
  } else {
    variant = Math.random() < 0.5 ? 'a' : 'b';
  }

  const url = request.nextUrl.clone();

  if (url.pathname === '/landing') {
    url.pathname = `/landing/${variant}`;
    const response = NextResponse.rewrite(url);

    if (!bucket) {
      response.cookies.set('ab-bucket', variant, {
        maxAge: 60 * 60 * 24 * 30, // 30日
        httpOnly: true,
      });
    }

    return response;
  }

  return NextResponse.next();
}

Generate Dinamis Gambar OGP

> Edge Functions dengan 動的OGPgambar generateするAPI buatkan.

// app/api/og/route.tsx
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',
          justifyContent: 'center',
          alignItems: 'center',
          width: '100%',
          height: '100%',
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          padding: '40px',
        }}
      >
        <h1 style={{ fontSize: 60, textAlign: 'center' }}>{title}</h1>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

batasan Edge Runtime

Edge Runtime 使え tidakNode.js API ada点 注意 diperlukan.fs、path、child_process dll. pemanfaatan き tidak.Claude Code batasan 伝えれば、Edge互換なコード generate くれ.

Summary

Vercel Edge Functions 使えば、超低レイテンシーなAPIやmiddleware 世界中 実行 bisa dilakukan.Claude Code pemanfaatanすれば、Edge Runtime特有 implementasipola juga efisien 習得 bisa dilakukan.エッジコンピューティング入門やA/Btestimplementasi juga bisa dijadikan referensi.

Untuk Vercel Edge Functionsの詳細, lihat Vercel公式ドキュメント.