Deploy Next.js Gratis: Tutorial Completo

Acesse 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.

No 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.

A 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.

Se 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.

Um 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.

No dashboard do seu projeto na Vercel, va em Settings e depois em Domains. Digite o dominio que voce quer conectar (ex: meusite.com.br).

A 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.

Se 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.

DNS 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 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.

Use 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.

Instale @next/bundle-analyzer e identifique dependencias pesadas antes do deploy. Um bundle menor significa carregamento mais rapido e melhor pontuacao no Lighthouse.

No 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.