1
massvaiteam
3 min de leitura ·

Como lançar um MVP de SaaS com Next.js, Supabase e Vercel sem quebrar o login

Se você está construindo um SaaS em 2026, a combinação Next.js + Supabase + Vercel é provavelmente a forma mais rápida de sair do zero para algo em produção. Ainda assim, quase todo mundo esbarra nos mesmos problemas: login que funciona no localhost e falha em produção, variáveis de ambiente erradas e dados expostos por falta de RLS. Este guia reúne o passo a passo que evita essas dores.

1. Estrutura mínima do projeto

Para um MVP, mantenha simples:

app/
  (marketing)/page.tsx      -> landing page
  (auth)/login/page.tsx     -> login
  (app)/dashboard/page.tsx  -> área logada
  auth/callback/route.ts    -> troca do código por sessão
lib/supabase/
  client.ts                 -> cliente do navegador
  server.ts                 -> cliente do servidor
middleware.ts               -> renova a sessão

Use o pacote @supabase/ssr. Ele cuida dos cookies para que Server Components, Route Handlers e o middleware enxerguem o mesmo usuário.

2. Variáveis de ambiente: o erro número 1

Você precisa de três valores do Supabase:

VariávelOnde usarPode ir para o navegador?
NEXT_PUBLIC_SUPABASE_URLcliente e servidorSim
NEXT_PUBLIC_SUPABASE_ANON_KEYcliente e servidorSim
SUPABASE_SERVICE_ROLE_KEYsó servidorNunca

A chave service_role ignora todas as regras de segurança. Se ela estiver com prefixo NEXT_PUBLIC_, qualquer visitante pode ler e apagar seu banco. Na Vercel, cadastre as variáveis separadamente para Production e Preview.

3. URLs de redirecionamento: o erro número 2

O sintoma clássico: "o login por e-mail funciona local, mas em produção o link volta para localhost". A correção fica no painel do Supabase, em Authentication → URL Configuration:

  • Site URL: seu domínio de produção, por exemplo https://app.seudominio.com
  • Redirect URLs: adicione
    • http://localhost:3000/**
    • https://app.seudominio.com/**
    • https://*-seu-time.vercel.app/** (para os deploys de preview)

E no código, gere o link de redirecionamento a partir da URL atual, não de um valor fixo.

4. Row Level Security desde o primeiro dia

Toda tabela no schema public deve ter RLS ativado:

alter table public.projects enable row level security;

create policy "dono lê" on public.projects
  for select to authenticated
  using ((select auth.uid()) = user_id);

create policy "dono cria" on public.projects
  for insert to authenticated
  with check ((select auth.uid()) = user_id);

Para conferir se alguma tabela ficou sem proteção:

select tablename, rowsecurity from pg_tables where schemaname = 'public';

5. Middleware para manter a sessão viva

Sem o middleware, os tokens expiram e o usuário é "deslogado" aleatoriamente. O middleware chama supabase.auth.getUser() em cada requisição e atualiza os cookies. Configure o matcher para ignorar arquivos estáticos (_next/static, imagens), senão você desperdiça execuções.

6. Pagamentos podem esperar

Para validar a ideia, você não precisa de Stripe no dia 1. Um botão "Quero o plano Pro" que registra o interesse numa tabela já mostra se alguém pagaria. Integre pagamentos quando houver pelo menos alguns usuários pedindo.

7. Gerar o código com IA (com cuidado)

Construtores de apps com IA aceleram muito as partes repetitivas: layout, CRUD, formulários, autenticação. O cuidado é revisar o que foi gerado, principalmente RLS e variáveis de ambiente, e garantir que o código seja seu. Prefira ferramentas que exportam um projeto Next.js padrão, sincronizam com o GitHub e fazem deploy na sua conta Vercel. O Massvai, por exemplo, gera apps Next.js com Supabase e faz deploy na Vercel, e você pode continuar desenvolvendo o código normalmente depois.

Checklist antes de divulgar o MVP

  • service_role só no servidor
  • Variáveis cadastradas em Production e Preview
  • Site URL e Redirect URLs configuradas (incluindo previews)
  • RLS ativado em todas as tabelas
  • Middleware renovando a sessão
  • Domínio próprio conectado na Vercel
  • Página de política de privacidade (LGPD) publicada
  • Um jeito simples de medir interesse em pagar

Conclusão

O stack Next.js + Supabase + Vercel permite lançar um MVP em dias, mas os detalhes de autenticação e segurança decidem se ele aguenta usuários reais. Siga o checklist acima e você evita os três problemas mais comuns: login quebrado em produção, chave secreta exposta e dados sem RLS.

Transparência: faço parte da equipe do Massvai. O checklist vale para qualquer projeto Next.js + Supabase, com ou sem ferramenta.

Carregando publicação patrocinada...