Next.js

Página de status e monitoramento de uptime para apps Next.js

Aponte o PulseAPI para suas rotas de API Next.js, edge functions ou site publicado. Receba alertas quando algo quebra e ofereça aos clientes uma página de status em tempo real.

Três formas de lançar uma página de status para Next.js

Escolha o nível de controle — sem código, low-code ou headless completo.

Hospedado

Adicione seu endpoint Next.js, aponte um CNAME para status.seudominio.com, pronto. Em 5 minutos.

Headless

Use nossa API pública para construir sua própria UI dentro do app Next.js. Controle total sobre design e marca.

Ver a API

Badges embutidos

Coloque badges SVG de uptime e status no seu README ou landing page. Atualizam a cada 5 minutos.

Cole este health endpoint no seu app Next.js

Copie, cole, aponte o PulseAPI para a URL. Retorna 200 saudável, 503 degradado.

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

Aponte o PulseAPI para /api/health. Use `dynamic = "force-dynamic"` para o Next.js não fazer cache da resposta. Retornar 503 em falha parcial marca o serviço como degradado em vez de fora do ar.

O que quebra em apps Next.js — e como detectar

Deploys silenciosos na Vercel

Um deploy ruim pode publicar um build que compila mas dá 500 em runtime. Monitorar a URL ao vivo pega isso em segundos, não quando o cliente reclama.

Regressões em edge functions

Edge functions têm limites de runtime rígidos. Uma dependência lenta ou uma mudança de timeout quebra tudo sem falha de build.

Conteúdo ISR vencido

Falhas de revalidação on-demand deixam páginas velhas no cache. Uma asserção sobre o body verifica se a página está servindo dados atualizados.

Abordagem headless

Não gostou da nossa página de status? Construa a sua em Next.js.

Nossa API retorna os mesmos dados que nossa UI hospedada consome. Spec OpenAPI completa em api.pulseapi.tech/docs.

app/status/page.tsx — construa uma página de status personalizada chamando nossa API de um Server Component do 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>
  )
}

Monitoramento Next.js — FAQ

Funciona com Vercel, Netlify e Cloudflare Pages?

Sim. O PulseAPI checa sua URL pública por fora, então funciona com qualquer hosting. Você pode monitorar a URL de produção, um preview deployment ou uma rota de API específica.

Posso monitorar edge e serverless functions?

Sim. Dê ao PulseAPI a URL da function ou rota. Se ela retornar status não-2xx, demorar demais, ou o body não bater com uma asserção, você recebe alerta.

Preciso de um SDK?

Não. O PulseAPI só chama seu endpoint via HTTP no intervalo que você escolher. Não há nada para instalar na sua app Next.js.

Posso construir uma página de status customizada em vez de usar a hospedada?

Sim — esse é o ângulo headless. A API pública retorna os mesmos dados da nossa UI. Consuma a partir de um Server Component, renderize como quiser, controle total sobre o design.

Comece a monitorar seu app Next.js em 5 minutos

Plano grátis. Sem cartão. Adicione seu endpoint e receba alertas quando quebrar.