Cache-Control für Next.js konfigurieren
Schritt-für-Schritt-Anleitung: API-Routen und Auth-Endpunkte mit no-store schützen, Dashboard-Bereiche absichern — mit fertigen next.config.js, Route Handler und Middleware-Konfigurationen.
Cache-Control in Next.js einrichten
Next.js bietet mehrere Wege, Cache-Control-Header zu setzen: die headers()-Funktion in next.config.js für globale URL-Pattern-basierte Regeln, NextResponse in Route Handlers für granulare Kontrolle, und die Middleware für auth-basierte Entscheidungen.
Besondere Aufmerksamkeit erfordert der Next.js App Router, der GET-Route-Handler standardmäßig cached. Für alle nutzerspezifischen API-Endpunkte muss das Caching explizit deaktiviert werden.
headers() in next.config.js konfigurieren
Die headers()-Funktion in next.config.js ist der einfachste Weg, Cache-Control-Header für alle Requests auf bestimmten URL-Pattern zu setzen — ohne dass jeder Route Handler individuell angepasst werden muss.
// next.config.js — Cache-Control für alle kritischen Routen
module.exports = {
async headers() {
return [
{
source: '/api/:path*',
headers: [{ key: 'Cache-Control', value: 'no-store' }]
},
{
source: '/(login|logout)',
headers: [{ key: 'Cache-Control', value: 'no-store' }]
},
{
source: '/dashboard/:path*',
headers: [{ key: 'Cache-Control', value: 'private, no-cache, must-revalidate' }]
}
];
}
};Im App Router cached Next.js Seiten und Route Handler intern. Headers aus next.config.js steuern nur den Client-Cache, nicht den internen Next.js-Cache. Für dynamische Routen zusätzlich export const dynamic = "force-dynamic" setzen.
Cache-Control in Route Handlers setzen
Für granulare Kontrolle können Cache-Control-Header direkt in Route Handlers über NextResponse gesetzt werden. Das empfiehlt sich für API-Endpunkte, die nutzerspezifische Daten zurückgeben.
// app/api/user/route.ts — Cache-Control im Route Handler
import { NextResponse } from 'next/server';
export async function GET() {
const data = await getUserData();
return NextResponse.json(data, {
headers: {
'Cache-Control': 'no-store',
},
});
}
// Alternativ: Route als dynamisch markieren
export const dynamic = 'force-dynamic';export const dynamic = "force-dynamic" deaktiviert den Next.js Full Route Cache für diese Route und sorgt dafür, dass jeder Request frisch verarbeitet wird — auch ohne expliziten Cache-Control-Header. Middleware für auth-basierte Cache-Kontrolle
Die Next.js Middleware läuft vor jeder Anfrage und ermöglicht es, Cache-Control-Header basierend auf Auth-Status, Pfad oder anderen Kriterien zu setzen. Das ist der empfohlene Weg für zentrale Cache-Policies.
// middleware.ts — Cache-Control für auth-geschützte Bereiche
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const response = NextResponse.next();
const sensitivePaths = ['/dashboard', '/api', '/account'];
const isSensitive = sensitivePaths.some(p =>
request.nextUrl.pathname.startsWith(p)
);
if (isSensitive) {
response.headers.set('Cache-Control', 'no-store');
}
return response;
}Cache-Control: public für sensible Endpunkte setzen. Konfiguration verifizieren
Nach der Implementierung prüfen Sie, ob alle Cache-Control-Header korrekt gesetzt werden. Beachten Sie, dass Next.js für /_next/static/-Assets automatisch immutable setzt — das ist korrekt und muss nicht angepasst werden.
# API-Route prüfen
curl -sI https://ihre-domain.de/api/user | grep -i cache-control
# Erwartete Ausgabe: Cache-Control: no-store
# Login-Seite prüfen
curl -sI https://ihre-domain.de/login | grep -i cache-control
# Erwartete Ausgabe: Cache-Control: no-store
# Next.js statische Assets prüfen (automatisch korrekt)
curl -sI https://ihre-domain.de/_next/static/chunks/main.js | grep -i cache-control
# Erwartete Ausgabe: Cache-Control: public, max-age=31536000, immutableDer Wolf-Agents Web Security Check prüft automatisch, ob Cache-Control für sensible Bereiche korrekt konfiguriert ist — als Teil der 166 Prüfpunkte mit 8 Punkten für Cache-Control.
Wie steht Ihre Domain bei Cache-Control?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Wie setze ich Cache-Control in Next.js?
In Next.js gibt es zwei Wege: Die headers()-Funktion in next.config.js für globale Regeln über URL-Pattern, und NextResponse.headers.set() in Route Handlers (App Router) oder res.setHeader() in API Routes (Pages Router) für granulare Kontrolle pro Endpoint.
Cached Next.js API-Routen automatisch?
Im App Router cached Next.js GET-Route-Handler standardmäßig. Um das zu deaktivieren, setzen Sie export const dynamic = "force-dynamic" in Ihrer Route-Datei oder setzen Sie Cache-Control: no-store als Response-Header. Im Pages Router werden API-Routes nicht automatisch gecacht.
Was ist der Next.js Full Route Cache und wie deaktiviere ich ihn?
Next.js cached im App Router serverseitig gerenderte Seiten im Full Route Cache. Für dynamische, nutzerspezifische Seiten müssen Sie den Cache deaktivieren: entweder über export const dynamic = "force-dynamic", durch Lesen von cookies() oder headers() in der Komponente, oder durch Cache-Control: no-store in den next.config.js headers().
Wie konfiguriere ich Cache-Control in Next.js Middleware?
In der middleware.ts können Sie Header für alle Requests vor dem Routing setzen: response.headers.set("Cache-Control", "no-store"). Das ist besonders nützlich für Auth-Checks — wenn ein Nutzer nicht eingeloggt ist und zur Login-Seite weitergeleitet wird, kann der Redirect ebenfalls no-store erhalten.
Wie lange cached Next.js statische Assets?
Next.js setzt für statische Assets im /_next/static/-Verzeichnis automatisch Cache-Control: public, max-age=31536000, immutable — das ist korrekt und muss nicht manuell konfiguriert werden. Für Assets im /public/-Verzeichnis gibt es keine automatische Cache-Control; diese sollten über next.config.js headers() konfiguriert werden.