Reporting API für Next.js konfigurieren
Report-To, NEL und Reporting-Endpoints in Next.js einrichten — über next.config.js headers() und einen API Route Handler für den Report-Empfang.
Reporting API auf Next.js
Next.js konfiguriert Report-To, NEL und Reporting-Endpoints zentral über die headers()-Funktion in next.config.js. Der Vorteil: Alle Reporting-Header werden automatisch für jede Route gesetzt — kein manuelles Setzen in einzelnen API Routes nötig. Für den Report-Empfang erstellen Sie einen /api/reports Route Handler, der eingehende Browser-Reports verarbeitet. Reporting API bringt 4 von 166 Punkten im Wolf-Agents Web Security Check.
Header in next.config.js setzen
Die headers()-Funktion in next.config.js setzt HTTP-Header für alle Routen. Fügen Sie Report-To, NEL und Reporting-Endpoints als Array von Header-Objekten hinzu.
// next.config.js
module.exports = {
async headers() {
return [{
source: '/(.*)',
headers: [
{
key: 'Report-To',
value: '{"group":"nel","max_age":31536000,"endpoints":[{"url":"https://reports.ihre-domain.de/nel"}]}, {"group":"default","max_age":31536000,"endpoints":[{"url":"https://reports.ihre-domain.de/default"}]}'
},
{
key: 'NEL',
value: '{"report_to":"nel","max_age":31536000,"failure_fraction":1.0,"success_fraction":0.01}'
},
{
key: 'Reporting-Endpoints',
value: 'nel="https://reports.ihre-domain.de/nel", default="https://reports.ihre-domain.de/default"'
}
]
}];
}
};Die headers()-Funktion in next.config.js funktioniert mit beiden Routern. Die Header werden serverseitig gesetzt und sind in der Network-Tab der DevTools sichtbar.
API Route für Report-Empfang erstellen
Erstellen Sie einen API Route Handler, der eingehende Browser-Reports entgegennimmt. Browser senden Reports als POST mit dem Content-Type application/reports+json.
// App Router — Report-Endpoint
import { NextRequest } from 'next/server';
export async function POST(
request: NextRequest,
{ params }: { params: { type: string } }
) {
const reports = await request.json();
console.log(`[${params.type}] Report:`, JSON.stringify(reports, null, 2));
// Optional: In Datenbank speichern
// await db.reports.insert({ type: params.type, reports, timestamp: new Date() });
return new Response(null, { status: 204 });
}In Produktion sollten Sie Rate-Limiting für den Report-Endpoint implementieren. Bei viel Traffic können tausende Reports pro Minute eingehen. Speichern Sie Reports in einer Queue statt sie synchron zu verarbeiten.
Wie steht Ihre Domain bei Reporting API?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Wie setze ich Reporting-Header in Next.js?
Über die headers()-Funktion in next.config.js. Sie definieren ein Array von Header-Objekten für das source-Pattern "/(.*)", das alle Routen abdeckt. Die Header werden bei jedem Request automatisch gesetzt.
Kann Next.js Reports direkt empfangen?
Ja. Erstellen Sie einen API Route Handler unter app/api/reports/route.ts (App Router) oder pages/api/reports.ts (Pages Router). Der Handler empfängt POST-Requests mit dem Content-Type application/reports+json und kann Reports in einer Datenbank speichern oder weiterleiten.
Funktioniert die Reporting API mit Vercel?
Ja. Die headers()-Konfiguration in next.config.js wird von Vercel vollständig unterstützt. API Routes für den Report-Empfang funktionieren ebenfalls. Alternativ können Sie Reporting-Header auch direkt in vercel.json konfigurieren.
Werden Reports auch im Development-Modus gesendet?
Ja, solange Sie die Reporting-Header in next.config.js konfiguriert haben. Für lokale Entwicklung können Sie den Report-Endpoint auf localhost zeigen lassen und die Reports in der Konsole loggen.
Welche Browser unterstützen Report-To und NEL?
Report-To, NEL und Reporting-Endpoints werden ausschließlich von Chromium-basierten Browsern unterstützt — Chrome 70+, Edge 79+ und Opera. Firefox und Safari implementieren keinen dieser Header.