Feature flags no Next.js com Vercel Flags sem pagar terceiro
Como implementar feature flags nativos no Next.js com Vercel Flags: targeting, rollout gradual e quando vale pagar pelo LaunchDarkly.
Por Vitor Morais
Fundador do MochaLabz ·
Feature flag no Next.js deixou de exigir assinatura de SaaS externo: o Vercel Flags chegou a GA com targeting por segmento de usuário, controles por ambiente e integração nativa ao Dashboard — tudo sem adicionar latência de round-trip a um servidor terceiro. Para o solopreneur que cobra por entrega e não quer linha extra no cartão, isso muda o cálculo de quando usar flag, quando deployar direto e quando escalar para uma ferramenta paga.
O que é o Vercel Flags e por que agora importa
Feature flags (ou feature toggles) são interruptores de código que ativam ou desativam funcionalidades sem novo deploy. Você shiipa a feature escondida, ativa para 10% dos usuários, mede, expande para 100% ou desfaz — tudo sem rollback de git. A lógica existe há décadas, mas o atrito de configurar um servidor de flags próprio ou assinar um SaaS fazia o solopreneur pular a etapa e ir direto ao deploy completo, aceitando o risco.
O Vercel Flags resolve esse atrito sendo provedor nativo da plataforma. Segundo o próprio changelog: "Vercel Flags is a feature flag provider built into the Vercel platform. Create and manage feature flags with targeting rules, user segments, and environment controls directly in the Vercel Dashboard." Isso significa que a avaliação da flag acontece na edge function — mesma infraestrutura do seu Next.js — sem latência adicional de terceiro e sem novo segredo de API pra guardar.
Suporte de framework
O Vercel Flags funciona nativamente com Next.js (App Router e Pages Router) e SvelteKit. Para outros frameworks hospedados no Vercel, a integração é possível via SDK, mas o Dashboard visual de targeting requer os adapters oficiais.
Instalação e configuração inicial em 5 minutos
O fluxo básico envolve três peças: instalar o pacote @vercel/flags, definir suas flags em um arquivo central e consumir no código. O Dashboard cuida do estado (on/off) e das regras de targeting sem tocar no repositório.
Instalar dependência
pnpm add @vercel/flagsDepois de instalar, crie um arquivo flags.ts na raiz do projeto. Cada flag é uma função assíncrona que retorna o valor atual — por padrão booleano, mas pode ser string ou JSON para variantes.
flags.ts — definição central
import { flag } from '@vercel/flags/next';
export const showNewPricingPage = flag<boolean>({
key: 'show-new-pricing-page',
defaultValue: false,
description: 'Ativa nova página de preços para teste A/B',
origin: 'https://vercel.com/seu-projeto/flags',
});
export const checkoutVariant = flag<'v1' | 'v2'>({
key: 'checkout-variant',
defaultValue: 'v1',
options: [
{ value: 'v1', label: 'Checkout atual' },
{ value: 'v2', label: 'Checkout novo (uma página)' },
],
});Para consumir em um Server Component ou em uma Route Handler, chame a função e aguarde o resultado. A avaliação lê o estado do Dashboard do Vercel sem chamada HTTP extra — o valor é injetado no runtime da edge.
app/pricing/page.tsx — consumo no Server Component
import { showNewPricingPage } from '@/flags';
export default async function PricingPage() {
const newPricing = await showNewPricingPage();
if (newPricing) {
return <NewPricingLayout />;
}
return <LegacyPricingLayout />;
}Coloque todas as flags em um arquivo único
Centralizar em flags.ts evita duplicar a string da key e facilita auditoria. Quando você remove uma flag, apaga de um lugar só. Flags espalhadas por componentes viram dívida técnica rápido.
Targeting por usuário: como segmentar sem expor dados
O valor real das flags não é ligar/desligar globalmente — é ativar para um subconjunto de usuários. O Vercel Flags aceita regras de targeting baseadas em atributos arbitrários que você passa como contexto: userId, plan, country, email etc. Você controla quais atributos enviar; nenhum dado trafega para servidor terceiro.
flags.ts — flag com targeting por plano
import { flag } from '@vercel/flags/next';
import type { ReadonlyHeaders } from 'next/dist/server/web/spec-extension/adapters/headers';
type Context = {
userId: string;
plan: 'free' | 'pro' | 'enterprise';
};
export const showAiSummary = flag<boolean, Context>({
key: 'show-ai-summary',
defaultValue: false,
identify({ headers }: { headers: ReadonlyHeaders }): Context {
// extraia do session token / cookie — nunca do request param
const session = parseSessionCookie(headers.get('cookie') ?? '');
return { userId: session.userId, plan: session.plan };
},
});No Dashboard, você cria regras do tipo "ativar para 100% dos usuários com plan = pro" ou "ativar para 20% aleatório de plan = free para teste A/B". A lógica de porcentagem usa hash determinístico do userId — o mesmo usuário sempre cai no mesmo grupo, garantindo consistência de experiência entre sessões.
- Segmento fixo: todos os usuários
proveem a feature — útil para early access. - Rollout percentual: X% aleatório do segmento — útil para testes A/B com cohort estável.
- Lista explícita:
userIdespecíficos — útil para beta interno com time ou clientes selecionados. - Ambiente: flag só ativa em
previewouproduction— impede vazamento de feature em staging pra produção.
Rollout gradual sem downtime: o fluxo recomendado
O erro clássico é deployar feature escondida e ativar para 100% de uma vez. O rollout gradual reduz impacto de bug: você ativa para 5%, monitora erros e conversão por algumas horas, sobe para 25%, 50%, 100%. Se algo der errado, o retorno é mudar um slider no Dashboard — sem rollback de código.
- Deploy com flag `off`: feature existe no código mas ninguém vê. Zero risco.
- Ativa para time interno (lista de
userId): valida fluxo real com dados reais. - Rollout 10%: monitore taxas de erro em
/api/e eventos de conversão por 24h. - Rollout 50%: se métricas estiverem estáveis, amplie. Mantenha by 48h.
- Rollout 100%: feature em produção plena.
- Remove a flag do código: cleanup — flag obsoleta é dívida técnica, não conquista.
Para monitorar cada etapa, integre o Vercel Analytics ou o OpenTelemetry nativo do Next.js. Uma forma simples é emitir um evento customizado quando o usuário vê a variante: track('pricing-page-new', { variant: newPricing ? 'v2' : 'v1' }). Com isso você compara taxa de clique em CTA por variante sem precisar de ferramenta de A/B externa paga.
Tracking de variante com Vercel Analytics
import { track } from '@vercel/analytics';
import { useEffect } from 'react';
export function PricingHero({ variant }: { variant: 'v1' | 'v2' }) {
useEffect(() => {
track('pricing-variant-seen', { variant });
}, [variant]);
return variant === 'v2' ? <NewHero /> : <LegacyHero />;
}Vercel Flags vs LaunchDarkly vs solução própria: quando pagar
A decisão de continuar com Vercel Flags ou migrar para uma ferramenta dedicada depende menos de número de flags e mais de casos de uso específicos: SDKs mobile, experimentos com análise estatística avançada, auditoria de quem mudou qual flag e quando. Para um solopreneur com SaaS web em Next.js, Vercel Flags cobre os primeiros meses — às vezes anos — de operação sem custo extra.
| Critério | Vercel Flags | LaunchDarkly / Split.io | Solução própria (Redis + API) |
|---|---|---|---|
| Custo adicional | Incluído no plano Vercel | Assinatura mensal dedicada | Custo de infra (Redis/DB) |
| Setup inicial | ~5 min (SDK + Dashboard) | ~30 min (conta + SDK + config) | Dias (design + build + deploy) |
| Targeting de usuário | Sim (atributos customizados) | Sim (avançado, com analytics nativo) | Depende do que você construir |
| SDK mobile (iOS/Android) | Não | Sim | Depende do que você construir |
| Análise estatística A/B | Básica (via Analytics) | Avançada (p-value, bayesiano) | Não (a menos que implemente) |
| Audit log de mudanças | Limitado | Completo | Depende do que você construir |
Não tente construir flag server próprio no MVP
Redis + API custom de flags parece simples mas esconde armadilhas: cache invalidation entre replicas, rollback de schema, segurança do endpoint de admin. Você vai gastar dias que deveriam ser de feature. Use Vercel Flags enquanto cabe; migre para ferramenta dedicada quando tiver receita justificando o custo mensal.
Padrões de uso real pra SaaS indie
Flags não servem só para A/B de UI. Quatro usos de alto valor para solopreneur que poucos tutoriais mencionam:
- Early access por plano: feature nova só para usuários
proenquanto você valida willingness-to-pay antes de abrir parafree. Sem código extra — só regra no Dashboard. - Kill switch de integração: flag que desabilita chamada a API externa instável (ex: provedor de IA com downtime) e exibe fallback. Você desativa em segundos sem deploy.
- Migração de dados gradual: ativa novo schema/query para 10% dos requests enquanto valida performance — padrão útil ao migrar de UUID v4 para v7, por exemplo, sem travar toda a base de uma vez.
- Soft launch por país: ativa feature apenas para
country = BRenquanto ajusta copy ou fluxo de pagamento específico do mercado local antes de abrir globalmente.
O kill switch de integração merece atenção especial em produtos com IA. Quando o custo de tokens dispara ou o modelo de upstream sofre degradação, uma flag permite cortar a chamada para o provedor e servir resposta em cache ou mensagem de indisponibilidade — sem acordar às 3h pra fazer hotfix. Se você já leu sobre como reduzir custo de API Claude com batch e caching, flags são a camada de controle que falta por cima daquela estratégia.
Para SaaS com planos diferentes, combine flags com o campo de metadados do usuário que você já armazena no Supabase. A função identify da flag lê o plano do session cookie — que você preenche no login — e o Dashboard aplica a regra. Nenhuma query extra no banco por request.
Se você está estruturando a precificação do seu SaaS e quer usar flags para testar elasticidade de preço com diferentes segmentos, o guia de como precificar seu SaaS MVP desde o primeiro cliente cobre a estratégia de preço que você vai testar. Flags são a camada técnica que viabiliza esse experimento sem risco de expor preço errado para usuário errado.
Perguntas frequentes
Vercel Flags tem custo adicional além do plano Vercel?+
O Vercel Flags está incluído na plataforma Vercel sem cobrança separada declarada. O custo que você paga é o do plano Vercel que já usa para hospedar o projeto. Consulte a página de pricing do Vercel para confirmar limites do plano atual, já que planos e limites mudam.
É possível usar Vercel Flags fora do Next.js?+
Sim. O Vercel Flags tem suporte declarado para SvelteKit além do Next.js, e um SDK genérico para outros frameworks hospedados no Vercel. O Dashboard visual de targeting e segments funciona em todos os casos; o que varia é o adapter de framework que você instala.
Como evitar que feature flags acumulem e virem dívida técnica?+
Defina uma data de expiração para cada flag no momento de criação — anote no Jira, Linear ou numa issue. Flags de rollout têm vida útil de dias a semanas; flags de kill switch podem ser permanentes mas devem ter dona clara. Todo sprint, delete as flags que chegaram a 100% de rollout e cujo código alternativo foi removido.
Feature flag afeta o SEO da página?+
Sim, se a flag alterar conteúdo indexável (H1, meta description, texto principal). O Googlebot não está logado e recebe o `defaultValue`. Garanta que a variante default seja a versão canônica que você quer indexada. Para testes A/B de landing page com impacto em SEO, ative flags por cookie de sessão do usuário autenticado — não por User-Agent.
Como garantir consistência quando o usuário troca de dispositivo?+
Use o `userId` persistente do banco como chave de targeting, não cookie de sessão volátil. O hash determinístico do Vercel Flags garante que o mesmo `userId` sempre cai no mesmo grupo percentual — independente do dispositivo ou navegador — desde que você envie o mesmo ID na função `identify`.
Quando devo migrar do Vercel Flags para LaunchDarkly ou similar?+
Migre quando precisar de SDKs mobile nativos (iOS/Android), análise estatística A/B integrada (p-value, intervalos de confiança) ou auditoria completa de quem alterou qual flag. Para SaaS web-only em fase de crescimento inicial, Vercel Flags cobre bem. O custo de migração é baixo — o padrão de código (flag como função assíncrona) é agnóstico de provedor.
Artigos relacionados
SEO técnico para site pequeno: o que realmente importa
Checklist técnico mínimo de SEO para solopreneur e indie hacker com stack Next.js/Supabase. Evite quedas em core updates e ganhe visibilidade sem equipe.
Como precificar seu SaaS MVP desde o primeiro cliente
Quanto cobrar no SaaS quando faturamento é zero e você não tem benchmark? Estratégia de preço pra solo founder que quer MRR real, não usuários grátis.
Segurança indie: 5 camadas que seu SaaS precisa (sem overkill)
Guia prático de segurança pra solopreneur. Quais defesas você realmente precisa, quanto custam e onde não vale investir tempo agora.
UUID v7 no PostgreSQL: quando migrar e ganhar 2x de performance
Guia prático: por que UUID v7 é melhor que v4, impacto real em índices B-tree, como migrar sem downtime e quando vale a pena.