Route-Schutz auf Middleware-Basis
Verwenden Sie Next.js-Middleware und Auth-Callbacks, um nicht authentifizierte Benutzer am Edge weiterzuleiten.
Route-Schutz auf Middleware-Basis ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist Next.js Middleware?
Middleware wird an der Edge ausgeführt, bevor eine Anfrage eine Route erreicht. Sie kann Weiterleitungen und Umschreibungen vornehmen oder Header hinzufügen – ideal für Authentifizierungsprüfungen, ohne Server Components zu laden.
Middleware erstellen
Erstellen Sie middleware.ts im Projektstammverzeichnis. Exportieren Sie eine middleware-Funktion und einen config-Matcher.
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token')?.value;
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};Matcher-Muster
Das matcher-Array verwendet Pfadmuster. Verwenden Sie :path* für beliebige Unterpfade oder schließen Sie Pfade mit einem negativen Lookahead aus.
export const config = {
matcher: [
// Protect all routes except public ones:
'/((?!login|register|_next|api/auth|favicon.ico).*)',
],
};Auth.js-Middleware-Integration
Auth.js (v5) stellt einen fertigen Middleware-Export bereit. Exportieren Sie ihn mit einem Matcher erneut aus middleware.ts.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/settings/:path*'],
};JWT in Middleware prüfen
Überprüfen Sie ein JWT-Token in der Middleware mit der Bibliothek jose (Edge-kompatibel – ohne das Node.js-Kryptografiemodul).
import { jwtVerify } from 'jose';
export async function middleware(request: NextRequest) {
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));
try {
await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
return NextResponse.next();
} catch {
return NextResponse.redirect(new URL('/login', request.url));
}
}Rollenbasierte Middleware
Lesen Sie die Benutzerrolle aus dem Token und leiten Sie auf eine Seite für unzureichende Berechtigungen weiter, wenn die Rolle nicht ausreicht.
const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
return NextResponse.redirect(new URL('/unauthorized', request.url));
}Daten an Route-Handler übergeben
Setzen Sie in der Middleware einen Request-Header, um decodierte Benutzerdaten an Server Components zu übergeben, ohne das Token erneut abzurufen.
const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;
// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');URLs in Middleware umschreiben
Verwenden Sie NextResponse.rewrite(), um für eine URL eine andere Seite auszuliefern, ohne die Adressleiste des Browsers zu ändern – nützlich für A/B-Tests oder Feature-Flags.
const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
return NextResponse.rewrite(new URL('/home-v2', request.url));
}Geo-Daten und IP in Middleware
Greifen Sie über das NextRequest-Objekt auf Geo-Daten und die IP-Adresse der Anfrage zu, um Weiterleitungen oder Blockierungen nach Region umzusetzen.
const country = request.geo?.country ?? 'US';
if (country === 'XX') {
return NextResponse.redirect(new URL('/region-blocked', request.url));
}Middleware-Performance
Middleware wird für jede passende Anfrage an der Edge ausgeführt. Halten Sie sie schlank – vermeiden Sie aufwendige Berechnungen und große Importe. Verwenden Sie ausschließlich Edge-kompatible Bibliotheken.
Authentifizierte und öffentliche Routen kombinieren
Ein häufig verwendetes Muster: Schützen Sie alles außer einer bestimmten Allowlist öffentlicher Pfade, die vor der Authentifizierungslogik geprüft wird.
const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();
// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));Schnelltest
Welche Bibliothek sollten Sie zum Überprüfen von JWTs in der Next.js-Middleware anstelle des Crypto-Moduls von Node verwenden?
Zusammenfassung
Erstellen Sie middleware.ts im Projektstammverzeichnis mit einer matcher-Konfiguration. Prüfen Sie Authentifizierungstoken mit dem Edge-kompatiblen jose, leiten Sie nicht authentifizierte Benutzer weiter und übergeben Sie decodierte Daten über Response-Header an Server Components. Halten Sie die Middleware schnell und ihre Abhängigkeiten gering.
Häufig gestellte Fragen
Ist die Lektion „Route-Schutz auf Middleware-Basis“ kostenlos?
Ja — der vollständige Text von „Route-Schutz auf Middleware-Basis“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Route-Schutz auf Middleware-Basis“?
Verwenden Sie Next.js-Middleware und Auth-Callbacks, um nicht authentifizierte Benutzer am Edge weiterzuleiten. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Route-Schutz auf Middleware-Basis“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Auth.js im Next.js App Router einrichten
- Sitzungsverwaltung und useSession-Hook
- Credentials-Provider und benutzerdefinierte Anmeldung
- Route-Schutz auf Middleware-Basis