Seu site publicado, com o código gerado por IA e no seu controle

Você precisa de um site profissional — portfólio, página de empresa, landing page — e não quer depender de outra pessoa toda vez que precisar mudar uma frase ou trocar uma foto. Um construtor tipo Wix ou Squarespace resolve rápido, mas prende você num template e cobra assinatura mensal pra sempre; contratar uma agência ou freelancer resolve melhor o visual, só que cada ajuste pequeno vira um orçamento novo e uma nova espera.

Pedir pra IA gerar o código, em Next.js, e publicar você mesmo muda essa conta: controle total sobre o site, nenhuma mensalidade de plataforma, e qualquer mudança futura é uma conversa com a IA, não um contrato novo. A troca é que a manutenção técnica — hospedagem, domínio, o que fazer quando o build quebra — passa a ser sua. É o mesmo fluxo que roda a própria essencial.ia.br: Next.js, Tailwind CSS, publicado na Vercel.

O que você precisa

• Conta gratuita no GitHub
• Conta gratuita na Vercel (login via GitHub)
• Claude.ai no navegador, ou Claude Code no terminal, pra gerar o código
• Node.js instalado, pra rodar o projeto localmente antes de publicar
• Custo: R$ 0 no plano gratuito da Vercel pra maioria dos sites pequenos; domínio próprio é a despesa real, algo em torno de R$ 40 por ano — o valor varia por registrador

Passo 1: Definir o briefing antes de pedir código

Antes de escrever qualquer prompt, responda um punhado de perguntas. Qual é o objetivo do site — portfólio, empresa, loja, blog? Quantas páginas — home, sobre, serviços, contato? Existe alguma referência visual de site que você gosta? Quais são as cores da marca? Que informações de contato entram no rodapé?

Esse briefing vira a base do prompt do próximo passo. Quanto mais específico agora, menos retrabalho depois: trocar a estrutura do site inteiro já pronto dá mais trabalho do que ajustar o briefing antes de gerar a primeira linha de código.

Passo 2: Gerar o projeto com IA

Duas formas de fazer isso. A mais simples é abrir o Claude.ai no navegador, colar o briefing, e criar os arquivos manualmente copiando cada trecho de código que ele devolve. A mais direta é instalar o Claude Code no terminal:

npm install -g @anthropic-ai/claude-code

Depois, rode claude dentro da pasta do projeto — a própria ferramenta cria e edita os arquivos direto, sem copiar e colar nada.

Qualquer uma das duas opções parte do mesmo bootstrap padrão do Next.js:

npx create-next-app@latest meu-site

E do mesmo prompt-base, adaptado ao seu briefing do Passo 1:

"Crie um site profissional usando Next.js e Tailwind CSS com as seguintes páginas: [suas páginas]. A empresa se chama [nome], trabalha com [área], e as cores da marca são [cores]. O site deve ser responsivo, rápido e moderno. Gere todo o código necessário."

Passo 3: Rodar local e iterar

npm install
npm run dev

Abra http://localhost:3000 no navegador pra ver o resultado antes de publicar qualquer coisa. Ajustes daqui em diante são conversa, não edição manual: "Mude a cor do cabeçalho para azul escuro", "Adicione uma seção de depoimentos na página inicial", "O botão de contato deve abrir o WhatsApp" são pedidos que a IA resolve direto no código.

A regra prática que vale guardar: sempre testar local antes de publicar. Nunca publicar sem ter visto rodar na sua própria tela primeiro.

Passo 4: Publicar na Vercel

O caminho clássico é subir o projeto pro GitHub (git init, git add ., git commit, git push) e importar o repositório pelo painel da Vercel — ela reconhece um projeto Next.js sozinha. Quem já está no terminal tem um caminho direto: instalar a CLI com npm install -g vercel, rodar vercel dentro da pasta do projeto e responder as perguntas; vercel --prod publica direto em produção.

O resultado imediato é uma URL pública, algo como meu-site.vercel.app. Um domínio próprio se conecta depois, nas configurações do projeto dentro da Vercel.

Passo 5: Manter e atualizar

O fluxo de manutenção é curto: descrever a mudança desejada pra IA, ela edita o código, depois testar local de novo (Passo 3), fazer commit e push. Se o projeto está conectado ao GitHub, a Vercel republica sozinha a cada push — sem você abrir nenhum painel depois da primeira vez.

O que pode dar errado

• Build falha na Vercel por erro de dependência ou versão do Node: o log de build no painel aponta a linha exata, é o primeiro lugar pra olhar.
• Site funciona local mas quebra em produção: quase sempre é uma variável de ambiente que existe na sua máquina e não foi configurada no painel da Vercel, na seção Environment Variables do projeto.
• A IA gera código com um pacote desatualizado ou que já não existe: por isso o Passo 3 nunca é opcional, mesmo quando o código parece certo à primeira vista.
• Publicar um site inteiro sem revisar o que foi gerado carrega risco de segurança, principalmente em qualquer formulário que recebe dado de visitante — vale uma revisão mínima antes do primeiro deploy.

Próximos passos

Conectar um domínio próprio nas configurações da Vercel, adicionar um formulário de contato com envio de e-mail (via Resend, por exemplo), e ativar o Vercel Analytics pra ver visitas sem depender de serviço externo são as três extensões mais naturais depois do site publicado.

O código é seu. Isso significa que toda mudança futura no site é uma conversa com a IA, não uma solicitação pra outra empresa — e é essa diferença, não a economia inicial, que compensa o trabalho de aprender o fluxo.