⚡Backend

Middleware einrichten

Jede Anfrage abfangen bevor sie ankommt

Middleware laeuft vor jeder Anfrage an deinen Server. Perfekt fuer Auth-Checks, Redirects, Geo-Blocking oder A/B-Tests. Eine Datei im Root, und du kontrollierst den gesamten Traffic.

Pro-Tip — Der schnelle Weg
Halte Middleware schlank. Sie laeuft bei JEDEM Request, auch fuer Bilder und statische Dateien. Nutze den matcher um sie nur auf relevante Pfade zu beschraenken.
Seite 1
1

Middleware Datei erstellen

Erstelle eine middleware.ts Datei im Root deines Projekts, auf der gleichen Ebene wie den app-Ordner. Sie wird automatisch von Next.js erkannt.

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


export function middleware(request: NextRequest) {
 console.log('Request zu:', request.nextUrl.pathname);
 return NextResponse.next();
}
2

Pfade einschraenken mit Matcher

Ohne matcher laeuft die Middleware bei jedem Request. Definiere einen matcher um sie nur auf bestimmte Pfade anzuwenden.

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

Auth-Check implementieren

Pruefe ob ein Token vorhanden ist und leite nicht-authentifizierte Nutzer zur Login-Seite um. Das ist die haeufigste Middleware-Verwendung.

export function middleware(request: NextRequest) {
 const token = request.cookies.get('auth-token')?.value;
 if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
 return NextResponse.redirect(new URL('/login', request.url));
 }
 return NextResponse.next();
}
4

Custom Headers setzen

Fuege Response-Headers hinzu fuer Security, Tracking oder Feature-Flags. Die Middleware kann sowohl Request als auch Response manipulieren.

export function middleware(request: NextRequest) {
 const response = NextResponse.next();
 response.headers.set('x-request-id', crypto.randomUUID());
 response.headers.set('x-pathname', request.nextUrl.pathname);
 return response;
}
Seite 2
Warum das funktioniert
  • Zentrale Stelle fuer Auth-Logik statt Checks in jeder einzelnen Seite
  • Edge Runtime bedeutet die Middleware laeuft weltweit nahe am Nutzer
  • Matcher verhindert Performance-Probleme durch unnoetige Ausfuehrungen
  • Headers und Redirects passieren bevor die Seite gerendert wird
Tipps
  • Middleware laeuft auf der Edge Runtime, nicht alle Node.js APIs sind verfuegbar
  • Nutze request.nextUrl statt request.url fuer einfaches URL-Parsing
  • Middleware kann keine Datenbank-Calls machen, nutze dafuer Route Handler
  • Teste Middleware lokal mit next dev, sie funktioniert identisch wie in Production
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen