Clear-Site-Data für Next.js
Clear-Site-Data über eine API Route mit NextResponse einrichten — inklusive Server Action Redirect-Pattern und vercel.json-Alternative.
Clear-Site-Data in Next.js
Next.js setzt Clear-Site-Data am besten über eine API Route im App Router. Die Route app/api/logout/route.ts löscht die Session, setzt den Header und leitet zur Login-Seite weiter. Server Actions können keine Response-Header setzen — leiten Sie daher von der Server Action zur API Route weiter.
Clear-Site-Data bringt 3 von 166 Punkten im Wolf-Agents Web Security Check. Die Implementierung in Next.js ist eine einzelne Datei mit wenigen Zeilen TypeScript — NextResponse abstrahiert die Header-Verwaltung.
API Route für Logout erstellen
Erstellen Sie eine API Route unter app/api/logout/route.ts. Die Route löscht die Session, setzt den Clear-Site-Data Header und leitet zur Login-Seite weiter.
// app/api/logout/route.ts
import { cookies } from 'next/headers';
import { NextResponse } from 'next/server';
export async function POST() {
// Session-Cookie löschen
cookies().delete('session');
// Redirect mit Clear-Site-Data Header
return NextResponse.redirect(
new URL('/login', process.env.NEXT_PUBLIC_URL),
{
status: 302,
headers: {
'Clear-Site-Data': '"cache", "cookies", "storage"',
'Cache-Control': 'no-store',
},
}
);
}GET-Requests können durch <img>-Tags oder Prefetching automatisch ausgelöst werden. POST verhindert, dass ein Angreifer Nutzer ungewollt ausloggt. Senden Sie den Logout-Request per fetch('/api/logout', { method: 'POST' }).
Server Action Redirect-Pattern
Server Actions können keine Response-Header direkt setzen. Erstellen Sie eine Server Action, die den Nutzer zur API Route weiterleitet — so wird der Clear-Site-Data Header über die API Route gesetzt.
'use server';
import { cookies } from 'next/headers';
import { redirect } from 'next/navigation';
export async function logout() {
// Session-Cookie löschen
cookies().delete('session');
// Redirect zur API Route, die den Header setzt
redirect('/api/logout');
}Header testen
Starten Sie den Development Server und testen Sie den Logout-Endpoint. Prüfen Sie in den Browser DevTools, ob der Header korrekt gesetzt wird.
curl -X POST -I http://localhost:3000/api/logout | grep -i clearcurl -X POST -I https://ihre-domain.de/api/logout | grep -i clearvercel.json konfigurieren — mit "status": 302 und dem Header im "headers"-Objekt. Wie steht Ihre Domain bei Clear-Site-Data?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Kann ich Clear-Site-Data in einer Next.js Server Action setzen?
Nein, nicht direkt. Server Actions können keine Response-Header setzen. Erstellen Sie stattdessen eine API Route unter app/api/logout/route.ts, die den Header setzt. Die Server Action kann dann zu dieser API Route weiterleiten — so erhalten Sie den Header trotzdem in der Response.
Soll ich POST oder GET für die Logout-API-Route verwenden?
POST ist sicherer. GET-Requests können durch img-Tags, Links oder Prefetching automatisch ausgelöst werden — ein Angreifer könnte einen Nutzer ungewollt ausloggen. Verwenden Sie export async function POST() in der API Route und senden Sie den Logout-Request per fetch mit method: POST.
Funktioniert Clear-Site-Data mit der Next.js cookies()-API?
Ja. Löschen Sie die Session zuerst mit cookies().delete("session") und setzen Sie anschließend den Clear-Site-Data Header über NextResponse. Die cookies()-API löscht nur den genannten Cookie, Clear-Site-Data löscht zusätzlich Storage und Cache.
Kann ich Clear-Site-Data auch über vercel.json setzen?
Ja. In der vercel.json können Sie eine Route definieren, die den Header als statischen Redirect mit 302-Status setzt. Diese Methode eignet sich für einfache Logout-Flows ohne serverseitige Session-Invalidierung. Für komplexere Szenarien verwenden Sie die API Route.
Funktioniert Clear-Site-Data auf Vercel genauso wie lokal?
Ja. Vercel leitet die Response-Header der API Route unverändert an den Browser weiter. Testen Sie lokal mit next dev und verifizieren Sie nach dem Deployment mit curl -I https://ihre-domain.de/api/logout, dass der Header korrekt gesetzt ist.