Status page and uptime monitoring for Next.js apps
Point PulseAPI at your Next.js API routes, edge functions, or deployed site. Get alerts when something breaks, give customers a live status page.
Three ways to ship a status page for Next.js
Pick the level of control you need — zero-code, low-code, or full headless.
Hosted
Add your Next.js endpoint, point a CNAME at status.yourdomain.com, done. Works in 5 minutes.
Headless
Use our public API to build your own UI inside your Next.js app. Full control over design and branding.
See the APIEmbedded badges
Drop SVG uptime and status badges into your README or landing page. Auto-updates every 5 minutes.
Drop this health endpoint into your Next.js app
Copy, paste, point PulseAPI at the URL. Returns 200 when healthy, 503 when degraded.
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 },
)
}Point PulseAPI at /api/health. Use `dynamic = "force-dynamic"` so Next.js does not cache the response. Returning 503 on partial outages marks the service degraded instead of down.
What breaks in Next.js apps — and how to catch it
Silent Vercel deploys
A bad deploy can ship a build that compiles but 500s at runtime. Monitoring the live URL catches this in seconds, not when a customer complains.
Edge function regressions
Edge functions have strict runtime limits. A slow dependency or a timeout change can break them without any build failure.
ISR stale content
On-demand revalidation failures leave stale pages in cache. A body-content assertion checks the page is serving fresh data.
Don't like our status page? Build your own in Next.js.
Our API returns the same data our hosted UI consumes. Full OpenAPI spec documented at 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
Does this work with Vercel, Netlify, and Cloudflare Pages?
Yes. PulseAPI checks your public URL from the outside, so it works with any hosting. You can monitor the production URL, a preview deployment, or a specific API route.
Can I monitor edge and serverless functions?
Yes. Give PulseAPI the URL of the edge function or API route. If it returns a non-2xx status, takes too long, or the body does not match an assertion, you get alerted.
Do I need an SDK?
No. PulseAPI just calls your endpoint over HTTP at the interval you choose. There is nothing to install in your Next.js app.
Can I build a custom status page instead of using the hosted one?
Yes — that is the headless angle. The public API returns the same data as our UI. Fetch it from a server component, render whatever you want, and you get full control over the design.
Start monitoring your Next.js app in 5 minutes
Free tier. No credit card. Add your endpoint and get alerts when it breaks.