Manual: Webhook com Supabase + Next.js

Receba eventos em tempo real no seu backend com facilidade.

Passo 1: Criar tabela webhook_testes

Execute este SQL no Supabase:

create table public.webhook_testes (
  id bigint generated by default as identity primary key,
  evento text not null,
  criado_em timestamp with time zone default now()
);

grant select, insert on public.webhook_testes to anon, authenticated;
grant usage, select on sequence public.webhook_testes_id_seq to anon, authenticated;

Passo 2: Criar endpoint webhook.ts

No seu projeto Next.js, crie pages/api/webhook.ts com:

import type {{ NextApiRequest, NextApiResponse }} from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {{
  if (req.method === 'POST') {{
    console.log('📩 Webhook recebido:', req.body);
    return res.status(200).json({{ status: 'ok' }});
  }}
  res.status(405).json({{ message: 'Método não permitido' }});
}}

Passo 3: Expor local com ngrok

Instale e execute o ngrok:

npm install -g ngrok
ngrok http 3000

Passo 4: Criar webhook no Supabase

  1. Acesse o menu Database > Webhooks
  2. Clique em New Webhook
  3. Configure:
    • Target URL: https://abcd1234.ngrok.io/api/webhook
    • Table: webhook_testes
    • Events: INSERT
    • Payload: Full record

Passo 5: Testar inserção manual

Insira um dado na tabela para testar:

insert into webhook_testes (evento) values ('Webhook funcionando');

Verifique o console do seu app Next.js:

📩 Webhook recebido: {{ id: 1, evento: 'Webhook funcionando', criado_em: '...' }}