Next.js

Страница статуса и мониторинг uptime для приложений Next.js

Направьте PulseAPI на свои API-роуты Next.js, edge-функции или развёрнутый сайт. Получайте алерты при сбоях и показывайте клиентам live-страницу статуса.

Начать бесплатно Собрать свою через API

Три способа запустить страницу статуса для Next.js

Выберите нужный уровень контроля — zero-code, low-code или полный headless.

Хостед

Добавьте Next.js-эндпоинт, направьте CNAME на status.yourdomain.com — готово. 5 минут.

Headless

Через публичный API собрать свою UI прямо в Next.js-приложении. Полный контроль дизайна и брендинга.

Смотреть API

Встраиваемые бейджи

SVG-бейджи uptime и статуса в README или лендинг. Обновляются каждые 5 минут.

Вставьте этот health endpoint в своё 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 ловит это за секунды — до того, как пожалуется клиент.

Регрессии в edge-функциях

У edge-функций жёсткие лимиты рантайма. Медленная зависимость или смена таймаута ломает их без фейла билда.

Устаревший контент ISR

Сбой on-demand revalidation оставляет старые страницы в кеше. Ассершн на тело ответа проверяет, что отдаются свежие данные.

Headless-угол

Не нравится наша страница статуса? Соберите свою на Next.js.

Наш API отдаёт те же данные, что потребляет наша хостед-UI. Полная OpenAPI-спека на api.pulseapi.tech/docs.

app/status/page.tsx — собираем свою страницу статуса, вызывая наш API из server-компонента Next.js.

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>
  )
}

Изучить API

Мониторинг Next.js — FAQ

Работает с Vercel, Netlify и Cloudflare Pages?

Да. PulseAPI проверяет публичный URL снаружи, так что работает с любым хостингом. Можно мониторить прод, preview-деплой или конкретный API-роут.

Можно мониторить edge- и serverless-функции?

Да. Дайте PulseAPI URL функции или роута. Если вернётся не-2xx, будет слишком долго, или тело не пройдёт ассершн — получите алерт.

Нужен SDK?

Нет. PulseAPI просто дёргает ваш эндпоинт по HTTP с заданным интервалом. В Next.js-приложение ничего ставить не надо.

Можно собрать свою страницу статуса вместо хостед-варианта?

Да — это и есть headless-подход. Публичный API отдаёт те же данные, что и наша UI. Забираете из server-компонента и рендерите как хочется, полный контроль над дизайном.

Запустите мониторинг Next.js-приложения за 5 минут

Бесплатный тариф, без карты. Добавьте эндпоинт, получайте алерты о падениях.

Начать бесплатно Другие фреймворки