Deploy Next.js Gratis: Tutorial Completo
Em menos de 5 minutos voce consegue subir um projeto Next.js na Vercel sem gastar nada — com CI/CD automatico, preview deployments e dominio customizado incluso. Aqui esta
A Vercel e a plataforma de deploy mais simples que existe para Next.js. Nao e marketing — e a realidade de quem ja tentou configurar isso em outras plataformas. O fluxo e: cria conta, conecta GitHub, escolhe o repositorio, clica em Deploy. Tres minutos depois, seu site esta no ar com HTTPS, CDN e CI/CD automatico.
Neste tutorial voce vai ver o processo completo: do projeto local ate o dominio customizado funcionando. Com prints mentais de cada etapa, as pegadinhas que ninguem conta e os limites que voce precisa conhecer antes de colocar em producao.
Se voce ainda ta escolhendo entre as plataformas de hosting, veja primeiro o guia de hospedagem gratuita para entender o panorama completo. Mas se ja decidiu pela Vercel, vamos direto ao ponto.
Pre-requisitos Antes de Comecar
Antes de abrir o dashboard da Vercel, certifica que voce tem:
Checklist Final
- Projeto Next.js funcionando localmente (qualquer versao a partir do 13)
- Repositorio no GitHub, GitLab ou Bitbucket (GitHub e mais integrado)
- Conta na Vercel — pode criar com o proprio GitHub
- Node.js 18+ local (a Vercel usa 20 por padrao em 2026)
- package.json com o script "build" configurado (vem por padrao no Next.js)
Nao precisa instalar Vercel CLI pra comecar. A interface web resolve tudo no primeiro deploy. A CLI e util depois para debugar localmente com as variaveis de ambiente da Vercel.
Passo a Passo: Do Zero ao Primeiro Deploy
- Crie a conta na VercelAcesse vercel.com e clique em 'Sign Up'. Use 'Continue with GitHub' — isso ja conecta sua conta e da permissao para importar repositorios. Nao tem formulario para preencher, nao tem cartao de credito para cadastrar.
- Importe o repositorioNo dashboard, clique em 'Add New > Project'. Voce vai ver a lista dos seus repositorios GitHub. Se nao aparecer o que voce quer, clique em 'Adjust GitHub App Permissions' para dar acesso ao repositorio especifico.
- Configure o projetoA Vercel detecta automaticamente que e um projeto Next.js e ja configura o framework, o comando de build (next build) e o diretorio de output. Na maioria dos casos voce nao precisa mudar nada aqui.
- Configure as variaveis de ambienteSe seu projeto usa .env.local, esse e o momento de adicionar as variaveis. Clique em 'Environment Variables' antes de clicar em Deploy. Voce pode adicionar mais depois, mas ai precisara de um novo deploy para as mudancas surtirem efeito.
- Clique em DeployUm clique e o processo comeca. Voce ve os logs em tempo real: instalando dependencias, executando o build, fazendo o upload dos assets. Em 1 a 3 minutos, aparece uma URL no formato seu-projeto.vercel.app com tudo funcionando.
Por que isso é importante
Deploy Next.js Gratis: Tutorial Completo. Em menos de 5 minutos voce consegue subir um projeto Next.js na Vercel sem gastar nada — com CI/CD automatico, preview deployments e dominio customizado incluso. Aqui esta o passo a passo completo.
Entendendo o CI/CD Automatico
Depois do primeiro deploy, a Vercel ja esta monitorando seu repositorio. Cada push para a branch principal (main ou master) dispara um novo deploy de producao automaticamente. Nao precisa configurar nada.
O que muda para outras branches e ainda melhor: cada push para qualquer outra branch gera um Preview Deployment — uma URL unica e temporaria com aquela versao do codigo. Isso e perfeito para revisar mudancas antes de mergear.
O fluxo fica assim na pratica: voce cria uma branch de feature, faz as mudancas, abre um PR no GitHub e a Vercel automaticamente posta um comentario no PR com a URL do preview. Seu time pode clicar e ver o resultado sem precisar rodar o projeto localmente.
# Workflow normal com Preview Deployments
git checkout -b feature/nova-pagina
# ... faz as mudancas ...
git add .
git commit -m 'add: nova pagina de contato'
git push origin feature/nova-pagina
# Vercel cria https://seu-projeto-git-feature-nova-pagina-seu-time.vercel.app
# Voce compartilha essa URL para revisao antes do mergeConfigurando Dominio Customizado Gratis
A URL .vercel.app funciona, mas dominio proprio passa mais credibilidade. No plano Hobby, voce pode conectar um dominio sem custo adicional.
- Acesse Settings > Domains no projetoNo dashboard do seu projeto na Vercel, va em Settings e depois em Domains. Digite o dominio que voce quer conectar (ex: meusite.com.br).
- Escolha o metodo de conexaoA Vercel oferece duas opcoes: Nameservers (transfira o controle de DNS para a Vercel, mais simples) ou registros DNS (adicione um registro A ou CNAME no seu registrador atual, mais flexivel). Para a maioria, CNAME e mais facil.
- Configure o DNS no seu registradorSe escolheu CNAME: no painel do seu registrador (Namecheap, Cloudflare, Registro.br), adicione um CNAME record apontando 'www' para 'cname.vercel-dns.com'. Para o apex (sem www), adicione um A record para 76.76.21.21.
- Aguarde a propagacaoDNS leva de alguns minutos a 48 horas para propagar. Na pratica, costuma funcionar em menos de 1 hora. A Vercel mostra o status em tempo real no dashboard e emite o certificado SSL automaticamente.
O SSL (HTTPS) e automatico e gratis via Let's Encrypt. Voce nao precisa fazer nada — a Vercel emite, renova e gerencia o certificado sem intervencao manual.
Variaveis de Ambiente: Como Gerenciar Certo
Variaveis de ambiente na Vercel tem tres escopos: Production (branch principal), Preview (outras branches) e Development (CLI local). Isso permite ter configuracoes diferentes para cada ambiente.
# Instale a CLI da Vercel para usar env vars localmente
npm i -g vercel
vercel login
vercel link # conecta o projeto local ao projeto na Vercel
# Baixa as variaveis de ambiente do ambiente de Development
vercel env pull .env.local
# Agora .env.local tem as mesmas variaveis configuradas no dashboardPor que isso é importante
Variaveis prefixadas com NEXT_PUBLIC_ ficam expostas no JavaScript do cliente. Nunca coloque secrets (chaves de API, senhas) em variaveis NEXT_PUBLIC_. Use sem o prefixo para variaveis que so o servidor precisa acessar.
Depois de adicionar ou modificar variaveis de ambiente no dashboard, voce precisa fazer um novo deploy para as mudancas entrarem em vigor. A Vercel nao reinicia o servidor automaticamente — o deploy e necessario.
Monitoramento e Analytics no Plano Gratis
A Vercel oferece Analytics e Web Vitals no plano Hobby. Nao e o Google Analytics — e focado em performance tecnica do seu Next.js.
Para ativar, instale o pacote e adicione o componente:
npm install @vercel/analytics @vercel/speed-insights// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="pt-BR">
<body>
{children}
<Analytics />
<SpeedInsights />
</body>
</html>
);
}Depois do deploy, o dashboard mostra Core Web Vitals (LCP, CLS, FID) por pagina, paises de origem, dispositivos e tendencias ao longo do tempo. Para projetos pessoais, isso substitui o Google Analytics sem precisar de banner de cookies para dados de performance.
Os Limites Que Voce Precisa Conhecer
O plano Hobby e generoso, mas tem limites que podem surpreender se voce nao souber antes:
Checklist Final
- 100GB de banda por mes — suficiente para a maioria dos projetos pessoais
- Serverless Functions: timeout de 10 segundos (Pro tem 60s)
- Edge Functions: 1MB de tamanho maximo por funcao
- Projetos pausam apos 30 dias sem deploy
- Uso comercial proibido — se e para cliente, precisa do Pro ($20/mes)
- 1 membro por projeto — sem colaboracao no plano gratis
- 100.000 invocacoes de Function por dia — monitorar se tiver API publica
O timeout de 10 segundos e o que mais pega devs de surpresa. Se sua API faz consultas lentas ao banco, processamento de imagem ou chamadas para APIs externas lentas, esse limite vai aparecer. A solucao e quebrar operacoes longas em jobs em background ou migrar para o plano Pro.
Otimizacoes para Melhorar Performance no Deploy
Deploy rapido e site rapido sao coisas diferentes. Aqui vai o que fazer para que os dois sejam bons:
- Use next/image para todas as imagensO componente Image do Next.js usa a infra de otimizacao de imagem da Vercel automaticamente. Ele converte para WebP, redimensiona e usa lazy loading. No plano Hobby sao 1.000 transformacoes de imagem gratis por mes.
- Configure cache por rotaUse generateStaticParams para rotas que podem ser pre-geradas. Quanto mais paginas estaticas, menos invocacoes de funcao voce usa — o que preserva seu limite diario de 100.000.
- Monitore o bundle com next bundle-analyzerInstale @next/bundle-analyzer e identifique dependencias pesadas antes do deploy. Um bundle menor significa carregamento mais rapido e melhor pontuacao no Lighthouse.
- Use Partial Prerendering quando possivelNo Next.js 15+, PPR permite que a shell estatica da pagina carregue instantaneamente enquanto partes dinamicas chegam depois. A Vercel suporta isso nativamente — e a diferenca no TTFB e visivel.
Proximo Passo: Monetize o Que Voce Deployou
Com o site no ar e funcionando, a pergunta natural e: como transformar isso em receita? O guia de hospedagem gratuita tem uma secao completa sobre isso — desde AdSense ate como transformar portfolio em clientes pagantes.
O deploy na Vercel e so o comeco. A plataforma da toda a infraestrutura tecnica de graca — o resto depende do que voce constroi em cima dela. Um projeto bem deployado e o primeiro passo para qualquer coisa: SaaS, blog, portfolio, loja, API publica.
Se voce chegou ate aqui e ja tem o site no ar, parabens. A parte tecnica ta resolvida. Agora e hora de pensar no produto.
Perguntas frequentes
Quanto tempo demora o primeiro deploy na Vercel?
O primeiro deploy costuma levar entre 1 e 3 minutos, dependendo do tamanho do projeto. Deploys subsequentes sao mais rapidos porque a Vercel usa cache de dependencias.
Posso usar dominio customizado no plano gratuito da Vercel?
Sim. O plano Hobby da Vercel permite conectar um dominio customizado sem custo adicional. Voce so precisa ter o dominio registrado em algum lugar e apontar os registros DNS para a Vercel.
A Vercel pausa projetos gratuitos?
Sim. Projetos no plano Hobby que nao recebem deploy por 30 dias sao pausados automaticamente. Um novo push ou deploy manual reativa o projeto imediatamente.