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.
Auch verfügbar für:
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.