HSTS für Next.js konfigurieren

Schritt-für-Schritt-Anleitung: HSTS in Next.js über next.config.js einrichten — eine Konfigurationsänderung, fertig.

Next.js · Schritt für Schritt

HSTS in Next.js

HTTP Strict Transport Security (HSTS) schützt Ihre Next.js-Anwendung vor SSL-Stripping. In Next.js setzen Sie den Header über die headers()-Funktion in next.config.js — eine einzige Konfigurationsänderung, die für alle Routen gilt, inklusive API Routes.

Plattformen wie Vercel erzwingen zwar automatisch HTTPS, setzen aber keinen HSTS-Header. Ohne HSTS fehlt der Browser-Befehl, HTTPS auch in Zukunft zu erzwingen — und Ihre Domain kann nicht in die Preload-Liste aufgenommen werden. HSTS bringt 15 von 166 Punkten im Wolf-Agents Web Security Check.

1 Schritt 1 von 3

HSTS-Header in next.config.js setzen

Die headers()-Funktion in next.config.js setzt HTTP-Header für alle Routen. Das source-Pattern /(.*) matcht jede URL — inklusive Seiten, API Routes und statische Assets.

next.config.js Produktiv
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Strict-Transport-Security',
        value: 'max-age=31536000; includeSubDomains; preload'
      }]
    }];
  }
};
App Router und Pages Router

Die headers()-Konfiguration funktioniert identisch mit beiden Routern. Das Pattern gilt global für die gesamte Next.js-Anwendung — unabhängig davon, ob Sie app/ oder pages/ verwenden.

2 Schritt 2 von 3

Konfiguration testen

HSTS funktioniert nur über HTTPS — der lokale Development-Server (localhost:3000) sendet den Header zwar, aber Browser ignorieren ihn über HTTP. Testen Sie nach dem Deployment auf Vercel, Netlify oder einem eigenen Server.

Terminal Verifizieren
# HSTS-Header prüfen (nach Deployment)
curl -sI https://ihre-domain.de | grep -i strict

# Erwartete Ausgabe:
# Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

# Vercel-spezifisch: Preview-Deployments prüfen
curl -sI https://ihr-projekt-xxxxx.vercel.app | grep -i strict
Vercel setzt HTTPS automatisch durch — Sie brauchen keinen separaten HTTP-zu-HTTPS-Redirect. Bei eigenem Server (z.B. hinter Nginx) muss der Redirect konfiguriert sein.
3 Schritt 3 von 3

HSTS Preload beantragen

Reichen Sie Ihre Domain auf hstspreload.org ein. Bei Vercel-Deployments mit Custom Domain: Stellen Sie sicher, dass die Custom Domain (nicht *.vercel.app) den HSTS-Header sendet.

1 Header enthält max-age ≥ 31536000, includeSubDomains und preload
2 Alle Subdomains unterstützen HTTPS
3 Domain auf hstspreload.org einreichen
Preload ist quasi-permanent. Die Entfernung dauert Monate. Nur beantragen, wenn alle Subdomains dauerhaft HTTPS unterstützen.

Wie steht Ihre Domain bei HSTS?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.

Häufig gestellte Fragen

Wo setze ich HSTS in Next.js — next.config.js oder Middleware?

Für statische Header wie HSTS ist next.config.js mit der headers()-Funktion der sauberste Weg. Middleware eignet sich für dynamische Header, die pro Request unterschiedlich sein müssen (z.B. CSP mit Nonces). HSTS ist statisch — next.config.js genügt.

Setzt Vercel automatisch HSTS?

Nein. Vercel erzwingt zwar automatisch HTTPS für alle Deployments, setzt aber keinen HSTS-Header. Sie müssen den Header selbst in next.config.js oder vercel.json konfigurieren.

Funktioniert HSTS im Next.js Development-Server?

Nein — der Development-Server läuft über HTTP (localhost:3000). HSTS wird nur über HTTPS-Verbindungen wirksam. Testen Sie HSTS nach dem Deployment auf Vercel, Netlify oder einem eigenen Server mit SSL-Zertifikat.

Gilt die headers()-Konfiguration für App Router und Pages Router?

Ja. Die headers()-Funktion in next.config.js funktioniert mit beiden Routern identisch. Das Pattern source: "/(.*)", das alle Routen matcht, gilt für App Router und Pages Router gleichermaßen.

Muss ich HSTS für API Routes separat konfigurieren?

Nein. Das source-Pattern "/(.*)", in next.config.js matcht alle Routen — inklusive API Routes unter /api/. Der HSTS-Header wird auf allen Responses gesetzt.

Kann ich HSTS auf Next.js mit Cloudflare als Proxy nutzen?

Ja. Bei Cloudflare als Reverse Proxy empfiehlt es sich, HSTS sowohl in Cloudflare (Dashboard → SSL/TLS → Edge Certificates) als auch in next.config.js zu setzen. Doppelte HSTS-Header sind harmlos — der Browser verwendet den stärkeren Wert.