A stack que usamos em todo projeto Presence

Por que essa stack e não outra

A gente usa Next.js App Router, Tailwind CSS, Vercel pra deploy e três modelos de IA — Claude, GPT e Gemini. Essa escolha não foi por hype. Testamos 4 frameworks antes de fixar no Next.js: tentamos Astro, Hugo, Remix e até WordPress headless. O Next.js ganhou por um motivo pragmático: é o único que entrega SSR, geração estática e API routes no mesmo projeto sem config extra. Pra quem precisa de Schema.org renderizado no servidor e llms.txt servido como rota estática, isso elimina 3 ferramentas que seriam necessárias em qualquer outro framework. A decisão levou 2 semanas de testes comparativos com projetos reais.

Next.js App Router: o que usamos de verdade

Não usamos tudo que o Next.js oferece. Ignoramos Server Actions, usamos pouco de middleware e não tocamos em ISR. O que importa pra gente são 4 coisas: layout nesting pra manter header e footer consistentes, metadata API pra gerar meta tags dinâmicas por página, generateStaticParams pra criar rotas de blog em build time e route handlers pra servir o llms.txt. Cada projeto Presence gera entre 5 e 12 páginas estáticas. O build time médio fica em 28 segundos na Vercel. A gente já tentou usar o Pages Router no começo e a migração pro App Router reduziu nosso código de configuração em 40%. Menos código significa menos lugar pra bug.

Os 3 modelos de IA e o papel de cada um

Claude é o cérebro de conteúdo. Ele recebe o briefing e gera a estrutura completa: seções, hierarquia, Schema.org e o arquivo llms.txt. A gente escolheu o Claude pra isso porque nos nossos testes ele erra menos em dados estruturados — taxa de acerto de 94% contra 78% do GPT no mesmo prompt. O GPT-4o entra como gerador de variações: dado o conteúdo base do Claude, ele produz 3 opções de headline e 2 opções de CTA por seção. O Gemini faz sugestões de layout — espaçamento, hierarquia visual, distribuição de blocos. Cada chamada de API custa centavos. O custo total de IA por projeto fica entre R$1,80 e R$3,50 dependendo do número de seções.

Tailwind CSS: velocidade sem customização infinita

A gente não cria design systems do zero pra cada projeto. Usa Tailwind com um preset que define 3 paletas de cor (neutra, quente, fria), 2 opções de tipografia e espaçamento padrão de 8px grid. Isso parece limitante mas é proposital. Quando a IA gera o layout, ela trabalha dentro dessas restrições e o resultado sai consistente em 95% dos casos. Antes do preset, cada projeto gerava uma combinação diferente de cores e fontes que exigia revisão manual pesada. Depois do preset, os ajustes visuais caíram de 15 por projeto pra 3 ou 4. Essa restrição intencional é o que permite manter qualidade visual sem um designer revisando cada entrega.

Deploy e monitoramento: o que roda depois

Todo projeto Presence vai pra Vercel no plano Pro. O deploy é automático via push no GitHub. Depois do deploy, 3 coisas rodam: Lighthouse CI verifica performance, acessibilidade e SEO. O Sentry captura erros em runtime. E um cron job semanal testa se o site ainda responde em menos de 2 segundos. O custo de infraestrutura por site é de aproximadamente R$0 no primeiro ano — a Vercel no plano Pro cobre múltiplos projetos. A gente paga R$120/mês pelo plano que hospeda todos os projetos Presence. Com 10 sites ativos, são R$12 por site por mês de infra. Isso é o que permite cobrar R$149/mês no plano Care e manter margem saudável.