Statusseite und Uptime-Monitoring für Next.js-Anwendungen
Richte PulseAPI auf deine Next.js API Routes, Edge Functions oder deployte Seite. Erhalte Alerts bei Ausfällen und gib Kunden eine Live-Statusseite.
Drei Wege für eine Statusseite für Next.js
Wähle die Kontrolltiefe — kein Code, Low-Code oder Full Headless.
Gehostet
Next.js-Endpoint hinzufügen, CNAME auf status.deinedomain.com zeigen, fertig. In 5 Minuten.
Headless
Public API nutzen, eigene UI direkt in der Next.js-App bauen. Volle Kontrolle über Design und Branding.
API ansehenEingebettete Badges
SVG-Uptime- und -Status-Badges in README oder Landing Page einbauen. Aktualisiert sich alle 5 Minuten.
Diesen Health-Endpoint in deine Next.js-App einfügen
Kopieren, einfügen, PulseAPI auf die URL richten. 200 gesund, 503 degradiert.
import { NextResponse } from 'next/server'
import { db } from '@/lib/db'
export const dynamic = 'force-dynamic'
export const runtime = 'nodejs'
export async function GET() {
const checks = await Promise.all([
db.raw('select 1').then(() => 'ok').catch(() => 'fail'),
fetch(process.env.REDIS_URL!, { signal: AbortSignal.timeout(500) })
.then((r) => (r.ok ? 'ok' : 'fail'))
.catch(() => 'fail'),
])
const [database, cache] = checks
const healthy = checks.every((c) => c === 'ok')
return NextResponse.json(
{ status: healthy ? 'healthy' : 'degraded', database, cache },
{ status: healthy ? 200 : 503 },
)
}Richte PulseAPI auf /api/health. Nutze `dynamic = "force-dynamic"`, damit Next.js die Antwort nicht cached. 503 bei Teilausfällen markiert den Service als degradiert statt down.
Was in Next.js-Apps kaputt geht — und wie man es fängt
Stille Vercel-Deployments
Ein fehlerhaftes Deployment kann ein Build ausliefern, das kompiliert, aber im Runtime 500er wirft. Monitoring der Live-URL fängt das in Sekunden ab — nicht erst, wenn ein Kunde reklamiert.
Regressionen in Edge Functions
Edge Functions haben strikte Runtime-Limits. Eine langsame Dependency oder geänderte Timeouts brechen sie ohne Build-Fehler.
Veraltete ISR-Inhalte
Fehlgeschlagene On-Demand-Revalidation lässt alte Seiten im Cache. Eine Body-Content-Assertion prüft, ob frische Daten ausgeliefert werden.
Statusseite gefällt dir nicht? Bau sie in Next.js selbst.
Unsere API liefert dieselben Daten wie unsere gehostete UI. Volle OpenAPI-Spec unter api.pulseapi.tech/docs.
export const revalidate = 30
export default async function StatusPage() {
const res = await fetch('https://api.pulseapi.tech/status/acme', {
next: { revalidate: 30 },
})
const data = await res.json()
return (
<main>
<h1>{data.page.title}</h1>
<p>Status: {data.overallStatus}</p>
<ul>
{data.endpoints.map((ep) => (
<li key={ep.id}>{ep.name} — {ep.status} ({ep.uptime24h}%)</li>
))}
</ul>
</main>
)
}Next.js-Monitoring — FAQ
Funktioniert das mit Vercel, Netlify und Cloudflare Pages?
Ja. PulseAPI prüft deine öffentliche URL von außen, funktioniert also mit jedem Hosting. Du kannst Production-URLs, Preview-Deployments oder eine bestimmte API Route überwachen.
Kann ich Edge- und Serverless-Functions überwachen?
Ja. Gib PulseAPI die URL der Function oder API Route. Bei Non-2xx-Status, zu langer Antwortzeit oder nicht passendem Body bekommst du einen Alert.
Brauche ich ein SDK?
Nein. PulseAPI ruft deinen Endpoint einfach per HTTP im gewählten Intervall auf. Es gibt nichts in deiner Next.js-App zu installieren.
Kann ich eine eigene Statusseite bauen statt der gehosteten?
Ja — das ist der Headless-Ansatz. Die Public API liefert dieselben Daten wie unsere UI. Aus einer Server Component abrufen, rendern wie du willst — volle Kontrolle über das Design.
Deine Next.js-App in 5 Minuten überwachen
Kostenloser Tarif. Keine Kreditkarte. Endpoint hinzufügen, Alerts erhalten.