>_
Modo Build
tutorialBuild com IA

Como publicar seu site na Vercel — do código ao ar em 10 minutos

Vercel é a forma mais rápida de colocar um site Next.js no ar. Você conecta o repositório, Vercel detecta a configuração e publica automaticamente. Cada novo commit atualiza o site sozinho.

16 de junho de 20266 min de leitura

Você criou o site. Ele funciona no seu computador.

Agora ele precisa funcionar para o mundo.

Publicar na internet não é mais um processo complicado. Com Vercel, você conecta o projeto uma vez — e toda atualização futura vai ao ar automaticamente.

O que é Vercel

Vercel é uma plataforma de hospedagem especializada em aplicações modernas, especialmente as feitas em Next.js.

Hospedagem é o serviço que mantém seu site funcionando em um servidor conectado à internet — para que qualquer pessoa, em qualquer lugar, consiga acessar.

Vercel tem um plano gratuito que é suficiente para a maioria dos projetos pessoais, blogs e portfólios.

O que você precisa antes de começar

Uma conta no GitHub. GitHub é onde o código do seu projeto fica armazenado online. Criar uma conta é gratuito em github.com.

Seu projeto em um repositório GitHub. Se você criou o site com Claude Code na lição anterior, o próximo passo é enviar o código para o GitHub.

Uma conta na Vercel. Você cria em vercel.com — pode entrar com a própria conta do GitHub, o que agiliza tudo.

Passo 1: enviar o projeto para o GitHub

Abra o terminal na pasta do seu projeto e rode:

git init
git add .
git commit -m "primeiro commit"

Depois, crie um repositório novo no GitHub:

  1. Acesse github.com e clique em "New repository"
  2. Dê um nome ao repositório
  3. Deixe como Private se não quiser que o código seja público
  4. Clique em "Create repository"

O GitHub vai mostrar os comandos para conectar. Cole no terminal:

git remote add origin https://github.com/seu-usuario/seu-repositorio.git
git push -u origin main

Repositório é uma pasta versionada — o GitHub registra cada mudança que você enviar, permitindo voltar a versões anteriores se necessário.

Agora seu código está no GitHub.

Passo 2: conectar o repositório à Vercel

  1. Acesse vercel.com e entre com sua conta GitHub
  2. Clique em "Add New Project"
  3. Vercel vai listar seus repositórios do GitHub
  4. Selecione o repositório do seu site
  5. Clique em "Import"

Vercel detecta automaticamente que é um projeto Next.js.

Não precisa configurar nada. Só clique em "Deploy".

Passo 3: aguardar o deploy

Deploy é o processo de publicar a versão atual do código no servidor.

Leva entre 30 segundos e 2 minutos. Você vê o progresso em tempo real.

Quando termina, Vercel mostra uma URL no formato:

https://seu-projeto.vercel.app

Abra no navegador. Seu site está no ar.

Passo 4: conectar um domínio próprio (opcional)

A URL padrão da Vercel funciona. Mas um domínio próprio — como seusite.com.br — passa mais credibilidade.

Para conectar:

  1. No painel da Vercel, abra seu projeto
  2. Clique em "Settings""Domains"
  3. Digite seu domínio e clique em "Add"
  4. Vercel vai mostrar os registros DNS que precisam ser configurados

DNS (Domain Name System) é o sistema que traduz um nome de domínio em um endereço de servidor. Você configura esses registros no painel do serviço onde comprou o domínio — como Registro.br, Namecheap ou GoDaddy.

Copie os valores que a Vercel mostra e cole no painel do seu registro de domínio. A propagação leva entre alguns minutos e algumas horas.

Deploy automático a cada atualização

Esta é a parte mais prática do Vercel.

Toda vez que você enviar uma atualização para o GitHub, a Vercel detecta e publica automaticamente. Você não precisa fazer nada além do:

git add .
git commit -m "descreva o que mudou"
git push

Em 1-2 minutos, a nova versão está no ar.

Se você está usando Claude Code para fazer mudanças no site — o fluxo é:

  1. Instrui o Claude Code a fazer a mudança
  2. Verifica localmente com npm run dev
  3. Envia ao GitHub com git push
  4. Vercel publica automaticamente

É o fluxo que o próprio Modo Build usa para publicar todo conteúdo e atualização.

O que fazer se o deploy falhar

Erros no deploy aparecem na aba "Build Logs" do painel da Vercel. Você vê exatamente qual linha de código causou o problema.

Copie a mensagem de erro. Cole no Claude Code:

"O deploy na Vercel falhou com esse erro: [mensagem]. Corrige."

Claude identifica a causa e corrige.

Vercel tem um plano gratuito generoso

O plano gratuito da Vercel inclui:

  • Projetos ilimitados
  • 100 GB de largura de banda por mês
  • Deploy automático via GitHub
  • HTTPS automático (o cadeado de segurança no navegador)
  • Domínio personalizado

Para a maioria dos sites de criadores, blogs e portfólios — o plano gratuito é suficiente por muito tempo.

Do código ao ar: o resumo

O processo completo de publicação é:

  1. Projeto criado com Claude Code → código funcionando localmente
  2. Código enviado para repositório no GitHub
  3. Repositório conectado à Vercel
  4. Vercel publica automaticamente a cada push

Uma vez configurado, você nunca mais precisa pensar em publicação. A Vercel cuida disso enquanto você foca no que importa: o conteúdo e as funcionalidades do seu site.

#vercel#deploy#hospedagem#next-js#publicação#iniciante