Next.js アプリ向けのステータスページと稼働監視
PulseAPI から Next.js の API ルート、エッジ関数、公開サイトを監視できます。障害を即座にアラートし、ユーザーにはリアルタイムのステータスページを提供します。
Next.js のステータスページを公開する 3 つの方法
必要な制御レベルを選択 — ノーコード、ローコード、フルヘッドレス。
ホステッド
Next.js エンドポイントを追加し status.yourdomain.com に CNAME を向けるだけ。5 分で完成。
埋め込みバッジ
SVG の稼働率・ステータスバッジを README やランディングに埋め込み。5 分ごとに自動更新。
この health エンドポイントを Next.js アプリに貼り付けます
コピペして PulseAPI を URL に向けるだけ。健康なら 200、劣化なら 503 を返します。
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 },
)
}/api/health を PulseAPI の監視先に設定します。`dynamic = "force-dynamic"` を指定してレスポンスをキャッシュしないようにしてください。部分障害時に 503 を返すとサービスは「停止」ではなく「劣化」扱いになります。
Next.js アプリで壊れるもの — それを検知する方法
Vercel の見えないデプロイ障害
ビルドは通るのにランタイムで 500 を返すデプロイは実際にあります。本番 URL を外形監視すれば、顧客の苦情より先に数秒で検知できます。
エッジ関数のリグレッション
エッジ関数は厳しいランタイム制限があります。遅い依存関係やタイムアウト変更が、ビルドを壊さず本番だけ壊すことがあります。
ISR のキャッシュ陳腐化
オンデマンド再検証の失敗で古いページがキャッシュに残ります。ボディ内容アサーションで実データが配信されているかを確認できます。
当社のステータスページが気に入らない? Next.js で自作してください。
当社 API はホステッド UI と同じデータを返します。完全な OpenAPI 仕様書は 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 監視 — FAQ
Vercel、Netlify、Cloudflare Pages で動きますか?
はい。PulseAPI は公開 URL を外部から監視するので、どのホスティングでも動作します。本番 URL、プレビューデプロイ、個別の API ルートを監視可能です。
エッジ関数やサーバーレス関数を監視できますか?
はい。関数や API ルートの URL を指定するだけです。2xx 以外のステータス、遅延、ボディアサーション不一致でアラートが飛びます。
SDK は必要ですか?
不要です。PulseAPI は指定した間隔で HTTP リクエストするだけです。Next.js アプリに追加でインストールするものはありません。
ホステッド版の代わりに独自のステータスページを作れますか?
はい。これがヘッドレスのアプローチです。公開 API からホステッド UI と同じデータが取得できます。サーバーコンポーネントで呼び出し、好きにレンダリングしてください。