Erweiterte Header für Next.js konfigurieren
Schritt-für-Schritt: Origin-Agent-Cluster in headers(), HTTPS-Redirect und WWW-Normalisierung in redirects(), X-Powered-By deaktivieren — alles in next.config.js.
Erweiterte Header in Next.js
Next.js konfiguriert HTTP-Header zentral in next.config.js über zwei asynchrone Funktionen: headers() für Response-Header und redirects() für URL-Weiterleitungen. Diese deklarative Konfiguration gilt für alle Routen und ist mit App Router und Pages Router kompatibel.
Erweiterte Header bringen zusammen 4 von 166 Punkten im Wolf-Agents Web Security Check. Diese Anleitung ist in 3 Schritte aufgeteilt: Origin-Agent-Cluster setzen, Redirects für HTTPS und WWW konfigurieren und schließlich veraltete Header wie X-Powered-By entfernen.
Origin-Agent-Cluster in next.config.js setzen
Die headers()-Funktion in next.config.js definiert HTTP-Response-Header für URL-Patterns. Mit dem Pattern /(.*) gilt der Header für alle Routen. Next.js wendet die Konfiguration beim Build-Prozess an und sendet die Header für alle Serverantworten.
// next.config.js (oder next.config.mjs / next.config.ts)
/** @type {import('next').NextConfig} */
const nextConfig = {
// X-Powered-By Header entfernen
poweredByHeader: false,
async headers() {
return [
{
// Gilt für alle Routen
source: '/(.*)',
headers: [
{
key: 'Origin-Agent-Cluster',
value: '?1',
},
],
},
];
},
};
export default nextConfig;Bei output: 'export' in next.config.js generiert Next.js statische HTML-Dateien — es gibt keinen Next.js-Server, der Headers setzt. In diesem Fall müssen Sie Header auf dem Hosting-Server (Nginx, Caddy, CDN) konfigurieren.
HTTPS-Redirect und WWW-Normalisierung
Die redirects()-Funktion in Next.js unterstützt bedingte Weiterleitungen über das has-Feld. Damit lassen sich HTTPS- und WWW-Redirects ohne Reverse-Proxy-Konfiguration direkt in der Anwendung definieren. Mit permanent: true sendet Next.js einen 308-Status (nicht 301).
// next.config.js — Redirects für HTTPS und WWW-Normalisierung
const nextConfig = {
poweredByHeader: false,
async headers() {
return [
{
source: '/(.*)',
headers: [
{ key: 'Origin-Agent-Cluster', value: '?1' },
],
},
];
},
async redirects() {
return [
// HTTP → HTTPS (nur auf eigenem Server — Vercel macht das automatisch)
{
source: '/(.*)',
has: [{ type: 'header', key: 'x-forwarded-proto', value: 'http' }],
destination: 'https://example.com/:path*',
permanent: true, // 308 (permanent) bei Next.js redirects()
},
// WWW → non-WWW
{
source: '/(.*)',
has: [{ type: 'host', value: 'www.example.com' }],
destination: 'https://example.com/:path*',
permanent: true,
},
];
},
};
export default nextConfig;redirects() konfiguriert werden. Veraltete Header entfernen
Next.js setzt standardmäßig X-Powered-By: Next.js — eine Technologieoffenbarung ohne Sicherheitsvorteil. Mit poweredByHeader: false wird dieser Header entfernt. X-XSS-Protection darf nicht gesetzt werden — der Header wurde 2023 aus allen Browsern entfernt.
// Vollständige next.config.js mit allen erweiterten Headern
const nextConfig = {
// X-Powered-By: Next.js entfernen
poweredByHeader: false,
async headers() {
return [
{
source: '/(.*)',
headers: [
{ key: 'Origin-Agent-Cluster', value: '?1' },
// X-XSS-Protection NICHT setzen — aus Browsern entfernt (2023)
// { key: 'X-XSS-Protection', value: '1; mode=block' } ← FALSCH!
],
},
];
},
};
export default nextConfig;Nach npm run build && npm start: curl -sI http://localhost:3000 | grep -iE "(origin-agent|x-powered|powered)". Origin-Agent-Cluster sollte erscheinen, X-Powered-By sollte fehlen.
Wie steht Ihre Domain bei Erweiterte Header?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Wie setze ich Origin-Agent-Cluster in Next.js?
In next.config.js über die headers()-Funktion: { key: "Origin-Agent-Cluster", value: "?1" } im headers-Array für den source-Pattern "/(.*)" hinzufügen. Next.js sendet den Header dann für alle Routen.
Was ist der Unterschied zwischen headers() und redirects() in next.config.js?
headers() definiert HTTP-Response-Header für bestimmte URL-Patterns. redirects() definiert Weiterleitungsregeln mit Statuscodes (301, 302). Beide werden serverseitig ausgewertet — bei Static Export (next export) greifen sie allerdings nicht, da es keinen Next.js-Server gibt.
Funktionieren next.config.js-Redirects auch bei Vercel/Deployment-Plattformen?
Ja — Vercel liest next.config.js und konfiguriert die Edge-Infrastruktur entsprechend. HTTPS-Redirects werden bei Vercel jedoch automatisch aktiviert ("Force HTTPS" in den Projekteinstellungen), sodass next.config.js-Redirects dort redundant sein können. Auf eigenen Servern oder anderen Plattformen sind sie nötig.
Wie deaktiviere ich den X-Powered-By Header in Next.js?
Mit poweredByHeader: false in next.config.js. Next.js setzt standardmäßig X-Powered-By: Next.js — eine unnötige Technologieoffenbarung. Die Einstellung entfernt den Header global für alle Antworten.
Kann ich Origin-Agent-Cluster im Middleware statt in next.config.js setzen?
Ja. In middleware.ts mit NextResponse und response.headers.set("Origin-Agent-Cluster", "?1"). Der Middleware-Ansatz ist flexibler (z.B. bedingte Header basierend auf Auth-Status), aber next.config.js ist einfacher und weniger fehleranfällig für statische Header.
Funktioniert der headers()-Ansatz bei App Router und Pages Router?
Ja, headers() in next.config.js funktioniert mit beiden Routern. Bei App Router können Sie zusätzlich Response-Header direkt in Route Handlers (app/api/.../route.ts) und Server Actions setzen. Für globale Security-Header ist next.config.js der empfohlene Weg.