Next.js

面向 Next.js 应用的状态页和正常运行时间监控

将 PulseAPI 指向你的 Next.js API 路由、边缘函数或已部署站点。故障时立即收到告警,并向用户提供实时状态页。

为 Next.js 发布状态页的三种方式

选择所需的控制级别 — 零代码、低代码或完全 headless。

托管

添加 Next.js 端点,把 CNAME 指向 status.yourdomain.com,完成。5 分钟搞定。

Headless

通过公共 API 在你的 Next.js 应用内构建自有 UI,完全掌控设计与品牌。

查看 API

嵌入式徽章

将 SVG 正常运行时间和状态徽章放入 README 或落地页。每 5 分钟自动更新。

把这个 health 端点加入你的 Next.js 应用

复制、粘贴、把 PulseAPI 指向 URL。健康时返回 200,降级时返回 503。

app/api/health/route.ts
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 },
  )
}

将 PulseAPI 指向 /api/health。使用 `dynamic = "force-dynamic"` 以避免 Next.js 缓存响应。部分故障时返回 503,服务将被标记为 "降级" 而不是 "宕机"。

Next.js 应用会出什么故障 — 如何捕获

Vercel 上的静默部署故障

错误的部署可能构建通过,但运行时 500。外部监控公共 URL 可在客户投诉前数秒内发现问题。

边缘函数回归

边缘函数有严格的运行时限制。依赖变慢或超时调整可能在不引起构建失败的情况下破坏生产环境。

ISR 缓存过期

按需重新验证失败会留下旧页面在缓存中。对响应体内容断言可验证是否提供了最新数据。

Headless 视角

不喜欢我们的状态页? 用 Next.js 自己构建。

我们的 API 返回的数据与托管 UI 完全一致。完整 OpenAPI 规范见 api.pulseapi.tech/docs.

app/status/page.tsx — 在 Next.js 服务器组件中调用我们的 API,构建定制的状态页。
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 监控 — FAQ

能否配合 Vercel、Netlify、Cloudflare Pages 使用?

可以。PulseAPI 从外部检查公共 URL,兼容任何托管平台。可监控生产 URL、预览部署或特定 API 路由。

能否监控边缘函数和 Serverless 函数?

可以。把函数或路由的 URL 交给 PulseAPI。非 2xx 状态、超时或响应体不符合断言都会触发告警。

需要 SDK 吗?

不需要。PulseAPI 只是按你设定的间隔用 HTTP 调用端点,无需在 Next.js 应用中安装任何东西。

可以不用托管版而是自建状态页吗?

可以,这就是 headless 方案。公共 API 返回与托管 UI 相同的数据,从服务器组件调用后可以任意渲染,完全掌控设计。

5 分钟开始监控你的 Next.js 应用

免费套餐,无需信用卡。添加端点,故障时接收告警。