Next.js & Edge 5. Mai 2026 10 min Lesezeit

Next.js Middleware mit Claude Code: Edge-Logik & Auth 2026

Next.js Middleware läuft auf der Edge — vor dem Rendering, weltweit verteilt, ultra-schnell. Claude Code kennt alle Middleware-Patterns: Auth Guards, A/B Testing, Geolocation-Redirects, Rate Limiting und i18n-Routing.

Was ist Next.js Middleware?

EdgeMiddleware: Vor dem Render ausführen

# middleware.ts liegt im Root (neben app/)
# Läuft auf Vercel Edge Network — weltweit, <1ms
# KEIN Node.js API — nur Web Standard APIs (fetch, Request, Response, URL)

# Was Middleware kann:
# ✅ Requests umleiten (redirect)
# ✅ Responses modifizieren (headers setzen, rewrite)
# ✅ Cookies lesen/schreiben
# ✅ Geo/IP-Daten (bei Vercel verfügbar)
# ✅ JWT-Tokens verifizieren
# ❌ Datenbank-Queries (kein Node.js!)
# ❌ fs-Module
# ❌ native Node Crypto (aber crypto.subtle funktioniert!)

Auth Guard: Geschützte Routen

AuthJWT-Verification in der Middleware

// middleware.ts
// Prompt: "Schütze alle /dashboard/* Routen mit JWT-Auth"
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

const PROTECTED_PATHS = ['/dashboard', '/settings', '/api/user'];
const PUBLIC_PATHS = ['/', '/login', '/signup', '/blog'];

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

  // Prüfen ob Route geschützt ist:
  const isProtected = PROTECTED_PATHS.some(p => pathname.startsWith(p));
  if (!isProtected) return NextResponse.next();

  // Token aus Cookie lesen:
  const token = request.cookies.get('auth-token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL(`/login?next=${pathname}`, request.url));
  }

  try {
    // JWT verifizieren mit Web Crypto API (Edge-kompatibel):
    const payload = await verifyJWT(token, process.env.JWT_SECRET!);

    // User-Info als Header weitergeben (Server Components können lesen):
    const response = NextResponse.next();
    response.headers.set('x-user-id', payload.sub);
    response.headers.set('x-user-role', payload.role);
    return response;
  } catch {
    // Ungültiges Token → Cookie löschen + Redirect:
    const response = NextResponse.redirect(new URL('/login', request.url));
    response.cookies.delete('auth-token');
    return response;
  }
}

// Matcher: Middleware nur für relevante Pfade:
export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|public).*)'],
};

JWT in Middleware: Verwende jose für JWT-Verifikation — es ist Edge-kompatibel (kein Node.js nötig). Auth.js (NextAuth v5) hat eine eingebaute auth()-Middleware die genau dieses Pattern implementiert.

A/B Testing mit Middleware

A/B TestVarianten-Zuweisung am Edge

// Prompt: "A/B Test für neue Landing Page — 50/50 Split"

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

  if (pathname !== '/') return NextResponse.next();

  // Bestehende Variante aus Cookie lesen (konsistente UX):
  let variant = request.cookies.get('ab-variant')?.value;

  if (!variant) {
    // Zufällige Zuweisung (50/50):
    variant = Math.random() < 0.5 ? 'control' : 'treatment';
  }

  // URL rewrite — User sieht immer "/", bekommt aber Variante:
  const url = request.nextUrl.clone();
  url.pathname = variant === 'treatment' ? '/landing-v2' : '/';

  const response = NextResponse.rewrite(url);

  // Variante in Cookie speichern (konsistent für nächste Besuche):
  response.cookies.set('ab-variant', variant, {
    maxAge: 60 * 60 * 24 * 7,  // 7 Tage
    httpOnly: true,
    sameSite: 'lax',
  });

  // Analytics-Header für Tracking:
  response.headers.set('x-ab-variant', variant);
  return response;
}

Rate Limiting am Edge

Rate LimitIP-basiertes Rate Limiting

// Prompt: "API-Endpunkte auf 100 Requests/Minute pro IP limitieren"
// Upstash Redis für Edge-kompatibles Rate Limiting:
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(100, '1 m'),
  analytics: true,
});

export async function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api/')) {
    return NextResponse.next();
  }

  const ip = request.headers.get('x-forwarded-for') ?? '127.0.0.1';
  const { success, limit, remaining, reset } = await ratelimit.limit(ip);

  if (!success) {
    return new NextResponse('Too Many Requests', {
      status: 429,
      headers: {
        'X-RateLimit-Limit': String(limit),
        'X-RateLimit-Remaining': '0',
        'X-RateLimit-Reset': String(reset),
        'Retry-After': String(Math.round((reset - Date.now()) / 1000)),
      },
    });
  }

  const response = NextResponse.next();
  response.headers.set('X-RateLimit-Remaining', String(remaining));
  return response;
}

Geolocation und i18n-Routing

// Prompt: "Deutsche und englische Version basierend auf User-Standort"

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

  // Vercel Edge: Geo-Daten automatisch verfügbar:
  const country = request.geo?.country ?? 'US';
  const DE_COUNTRIES = ['DE', 'AT', 'CH'];

  // Sprache aus Accept-Language Header:
  const acceptLang = request.headers.get('accept-language') ?? '';
  const prefersGerman = acceptLang.startsWith('de') || DE_COUNTRIES.includes(country);

  // Keine Locale im Pfad? → Redirect:
  if (!pathname.startsWith('/de') && !pathname.startsWith('/en')) {
    const locale = prefersGerman ? 'de' : 'en';
    return NextResponse.redirect(new URL(`/${locale}${pathname}`, request.url));
  }

  return NextResponse.next();
}

Middleware-Limits: Middleware hat eine CPU-Zeitbeschränkung (Vercel: 15ms). Keine langen DB-Queries. Für komplexe Auth-Logik: leichte JWT-Prüfung in Middleware, vollständige Session-Validierung im Server Component oder API Route.

Edge-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiges Middleware-Modul mit Auth Guards, A/B Testing, Rate Limiting, Geolocation-Routing und i18n — inkl. Vercel Edge Config für dynamische Konfiguration ohne Deployment.

14 Tage kostenlos testen →