Como fazer deploy de Next.js na Vercel: guia completo e prático

Se você terminou de desenvolver uma aplicação em Next.js, ou está começando agora um projeto pessoal, uma das primeiras dúvidas que aparece é: como colocar isso no ar de verdade, com domínio, HTTPS e tudo mais funcionando. A resposta curta para a maioria das pessoas é: usar a Vercel, a própria plataforma criada pela equipe que mantém o framework. Mas, como qualquer ferramenta, existem detalhes que fazem a diferença entre um deploy tranquilo e horas de tentativa e erro. Este guia foi escrito para quem quer entender o caminho completo, do zero até o domínio personalizado, sem prometer mágica e sem pular etapas importantes.

A proposta aqui é duplamente prática. Primeiro, mostrar o caminho que de fato funciona para a maior parte dos projetos Next.js em 2026, considerando o estado atual do framework e da plataforma. Segundo, alertar para os pontos em que muita gente trava, como variáveis de ambiente que não carregam, imagens que somem após o deploy, problemas com rotas dinâmicas e custos que aparecem sem aviso. Se você nunca publicou nada, leia do começo. Se já publicou antes mas teve algum problema específico, use os índices internos para navegar.

Antes de entrar no passo a passo, vale um aviso honesto: este conteúdo tem caráter informativo. Decisões técnicas sobre infraestrutura, custos em produção e segurança devem ser tomadas com profissional especializado, especialmente em projetos comerciais ou com dados sensíveis.

O que é deploy e por que a Vercel é tão citada em Next.js

Deploy, em linguagem simples, é o ato de tirar o código do seu computador e colocá-lo em um servidor acessível pela internet. Enquanto o site roda apenas na sua máquina, ninguém além de você consegue acessar. Quando você faz o deploy, o código passa a responder requisições de qualquer pessoa, em qualquer lugar, através de um endereço (URL).

A Vercel é uma plataforma de hospedagem focada em aplicações front-end e full-stack modernas, com suporte nativo a Next.js. Isso acontece porque a Vercel é mantida pela mesma empresa que criou o Next.js, então a integração entre os dois é profunda: o framework foi pensado, desde o início, para funcionar bem na infraestrutura da Vercel.

Na prática, isso significa algumas vantagens concretas:

• Reconhecimento automático do framework.
• sem configurações extensas.
• Build otimizada para os recursos do Next.js.
• como renderização no servidor.
• geração estática e rotas de API.
• HTTPS automático.
• sem precisar comprar certificado separado.
• CDN global.
• que distribui o conteúdo por servidores próximos do usuário final.
• Integração direta com o GitHub.
• GitLab e Bitbucket.
• permitindo deploy a cada push.

Para projetos pequenos e médios, esse conjunto de vantagens reduz muito a fricção. Para projetos grandes, vale analisar com cuidado o plano e os limites, porque o custo pode crescer de acordo com o tráfego, com o número de funções serverless e com o uso de imagem otimizada.

Preparando o projeto antes do primeiro deploy

Antes mesmo de acessar a Vercel, vale revisar o estado do projeto local. Muitos problemas de deploy começam aqui.

Conferir a versão do Next.js

Em 2026, o Next.js está consolidado na versão 15 como a linha estável mais recente, com o React 19 já bem suportado. Mas nem todo projeto está atualizado, e isso importa para o deploy. Versões muito antigas podem ter comportamentos diferentes na Vercel, especialmente no que diz respeito a cache e imagens.

Para verificar a versão do seu projeto, basta abrir o arquivo package.json e procurar pelo campo dependencies. Você verá algo como "next": "15.1.x" ou uma versão similar. Se estiver muito atrás, considere atualizar antes de publicar, mas faça isso em ambiente local e com testes.

Garantir que o build local funciona

Existe um teste simples que evita muita dor de cabeça: rodar, na sua máquina, o mesmo comando que a Vercel vai rodar no servidor. Esse comando é, em geral, npm run build ou yarn build, dependendo do gerenciador de pacotes que você utiliza.

Se o build local termina com sucesso, há grande chance de o deploy funcionar. Se ele falha, não adianta tentar publicar na Vercel esperando que o problema desapareça, porque não vai.

Ajustar o script de build nas configurações

A Vercel detecta automaticamente os comandos padrão, mas vale conferir se o seu package.json tem os scripts mínimos esperados:

• dev.
• para desenvolvimento local. build.
• para gerar a versão de produção. start.
• para iniciar o servidor em modo de produção.

Em projetos criados com create-next-app, esses scripts já vêm prontos. Em projetos customizados ou migrados de outras estruturas, pode ser necessário ajustar.

O passo a passo do deploy na Vercel

Agora que o projeto está revisado, vamos ao procedimento.

Criar conta na Vercel

O primeiro passo é acessar o site da Vercel e criar uma conta. Você pode se cadastrar com e-mail e senha ou, o que costuma ser mais rápido, entrar com a conta do GitHub, GitLab ou Bitbucket. A integração com o Git é o que viabiliza o deploy contínuo, então faz sentido conectar desde o início.

Importar o repositório do projeto

Depois de logado, a Vercel mostra a opção "Add New Project" ou "Novo Projeto&quot. Ao clicar, ela lista todos os repositórios disponíveis na sua conta de Git. Selecione o repositório do projeto Next.js.

Nesse momento, a Vercel já faz uma análise automática: detecta que é um projeto Next.js, sugere comandos de build e instalação, e mostra a estrutura básica. Para a maioria dos casos, basta confirmar.

Configurar variáveis de ambiente

Esse é o ponto onde muita gente trava, então vale atenção dobrada. Variáveis de ambiente são configurações sensíveis, como chaves de API, strings de conexão com banco de dados e tokens de serviços externos. Elas não devem, em nenhuma hipótese, ir para o código-fonte versionado.

Na tela de configuração do projeto na Vercel, existe uma seção chamada "Environment Variables" ou "Variáveis de Ambiente&quot. Ali você adiciona cada variável separadamente, informando nome e valor.

Boas práticas nesse momento:

• Use o mesmo nome que já está no seu arquivo .env.local.
• para evitar renomear no código.
• Adicione as variáveis separadamente para cada ambiente (Production.
• Preview e Development).
• quando fizer sentido.
• Nunca cole uma chave de produção em ambiente de Preview sem necessidade.
• Depois de adicionar.
• refaça o deploy para garantir que as variáveis foram carregadas.

Confirmar e iniciar o deploy

Com tudo configurado, basta clicar em "Deploy&quot. A Vercel vai clonar o repositório, instalar as dependências, rodar o build e, se tudo der certo, entregar uma URL pública em poucos minutos. A primeira vez costuma ser a mais demorada, porque o cache ainda não está aquecido.

Ao final, você recebe uma URL no formato seu-projeto.vercel.app, que já está funcionando com HTTPS. Esse é o seu deploy inicial.

Configurando domínio personalizado

A URL padrão da Vercel funciona, mas para projetos profissionais o ideal é usar um domínio próprio, como www.seusite.com.br.

O processo é o seguinte:

• Acesse as configurações do projeto na Vercel e vá até a aba "Domains&quot.
• Digite o domínio que deseja usar e siga as instruções.
• A Vercel vai pedir que você configure os registros DNS no painel da empresa onde registrou o domínio (Registro.br.
• GoDaddy.
• Cloudflare.
• Namecheap.
• entre outras).
• Em geral, é preciso adicionar um registro do tipo A ou CNAME apontando para os endereços indicados pela Vercel.
• Depois de salvar.
• a propagação do DNS pode levar de alguns minutos até 48 horas.
• dependendo do provedor.

Quando o domínio responde corretamente, a Vercel ativa automaticamente o certificado SSL, e o site passa a funcionar com HTTPS no endereço personalizado.

Ajustes finos que costumam travar iniciantes

Mesmo seguindo o passo a passo, alguns detalhes podem causar confusão. Veja os mais comuns.

Imagens que não aparecem após o deploy

Se você usa o componente Image do Next.js, ele depende de uma configuração de domínios permitidos. Em produção, por padrão, o Next.js só aceita imagens de origens previamente autorizadas. A solução é configurar o arquivo next.config.js com a chave images.domains ou images.remotePatterns, listando os domínios das imagens externas que você utiliza.

Variáveis de ambiente que não carregam

Se o build passa, mas a aplicação se comporta como se a variável estivesse vazia, três coisas são as causas mais prováveis: a variável não foi marcada para o ambiente correto, o nome está diferente do usado no código ou o deploy não foi refeito depois de adicionar a variável.

Rotas dinâmicas com erro 404

Projetos que usam getStaticPaths com fallback: false exigem que todos os caminhos sejam gerados no build. Se você recebe 404 em páginas que deveriam existir, vale revisar essa configuração e considerar o uso de fallback: true ou fallback: blocking.

Funções serverless com timeout

A Vercel impõe limites de tempo de execução para funções. No plano Hobby, esse limite é de 10 segundos. No Pro, pode chegar a 60 segundos, dependendo do tipo de função. Se sua aplicação precisa de processamentos longos, vale considerar mover essa lógica para um serviço externo ou fila.

Comparativo dos planos da Vercel em 2026

Para ajudar na decisão, segue um panorama dos planos mais comuns. Os valores e limites podem mudar, então vale conferir diretamente na página oficial antes de tomar qualquer decisão.

Fonte: página oficial de preços da Vercel, consultada em 2026.

Para a grande maioria dos leitores deste artigo, o plano Hobby é mais que suficiente para começar. O Pro passa a fazer sentido quando o tráfego cresce ou quando a equipe tem mais de uma pessoa publicando deploys.

Boas práticas de segurança no deploy

Publicar uma aplicação na internet expõe ela a todo o tipo de ameaça automatizada, então algumas precauções são obrigatórias. Nunca commite chaves de API no repositório, mesmo que o repositório seja privado. Use autenticação forte na conta da Vercel e ative autenticação em duas etapas. Revise permissões de acesso ao projeto, especialmente se trabalha em equipe. Mantenha dependências atualizadas, porque versões antigas podem ter vulnerabilidades conhecidas. Monitore logs e métricas, para identificar acessos estranhos antes que se tornem problema.

Essas práticas são simples de implementar e evitam incidentes sérios.

Quando o deploy na Vercel não é a melhor escolha

Apesar das vantagens, existem cenários em que outras opções podem fazer mais sentido. Se o seu projeto tem regras muito específicas de compliance, precisa rodar em uma infraestrutura dedicada ou tem custos muito altos de tráfego, vale avaliar outras plataformas, como AWS, Google Cloud, Azure ou mesmo provedores brasileiros especializados em Next.js.

Outro caso é o de aplicações que dependem fortemente de processos longos no servidor, como processamento de vídeo em tempo real. Nesses cenários, a arquitetura serverless da Vercel pode não ser a melhor opção, e um servidor tradicional ou container pode ser mais adequado.

A decisão de infraestrutura, em projetos maiores, deve ser tomada com profissional especializado, considerando custo total, equipe disponível e requisitos técnicos específicos.

Leitura complementar sobre Next.js

Para se aprofundar além deste guia, vale considerar os seguintes temas:

• Otimização de performance em Next.js.
• com foco em Core Web Vitals.
• Estratégias de cache.
• ISR e revalidação de páginas.
• Integração com CMS headless.
• como Contentful.
• Sanity e Strapi.
• Autenticação em aplicações Next.js.
• com NextAuth.js e outras bibliotecas.
• Testes automatizados em projetos Next.js.
• com Jest.
• Vitest e Playwright.

Cada um desses temas rende um artigo completo e pode ser o próximo passo na sua jornada com o framework.

Perguntas Frequentes (FAQ)

O deploy na Vercel é gratuito?

Sim, a Vercel oferece um plano gratuito chamado Hobby, que permite deploy de projetos pessoais, estudos e MVPs sem custo. Esse plano tem limites de banda e de execuções de funções, mas é suficiente para começar. Para projetos comerciais ou com tráfego maior, existe o plano Pro, que é pago.

Preciso configurar o build manualmente?

Na maioria dos casos, não. A Vercel reconhece projetos Next.js automaticamente e aplica os comandos padrão. Mas, se o seu projeto tem uma estrutura customizada, é possível ajustar comandos de build, instalação e diretório de saída nas configurações do projeto.

Como funciona o deploy contínuo?

Depois do primeiro deploy, qualquer novo push para a branch principal (geralmente main ou master) dispara um novo deploy automaticamente. A Vercel também gera URLs de preview para cada pull request, o que facilita a revisão antes de ir para produção.

Posso usar variáveis de ambiente diferentes em produção e preview?

Sim. A Vercel permite configurar variáveis de ambiente por ambiente (Production, Preview e Development). Isso é especialmente útil quando você tem, por exemplo, uma chave de banco de dados para testes e outra para produção, evitando misturar dados.

É possível migrar meu site para fora da Vercel depois?

Sim. A Vercel não prende o seu código. Você pode migrar para qualquer outra plataforma que rode Next.js, como AWS, Google Cloud, Netlify ou um servidor próprio. O processo envolve ajustar configurações de build, DNS e infraestrutura, mas o código em si continua sendo seu.

Conclusão

Fazer o deploy de uma aplicação Next.js na Vercel é, de fato, um dos caminhos mais diretos disponíveis hoje. A combinação entre o framework e a plataforma foi pensada para funcionar bem em conjunto, o que reduz muito a configuração inicial e permite que você foque no que importa: o produto em si.

O segredo, como em qualquer processo técnico, está em prestar atenção aos detalhes. Variáveis de ambiente no lugar certo, domínio configurado corretamente, build local funcionando antes de publicar, e monitoramento ativo depois que o site está no ar. Seguindo esses cuidados, o deploy deixa de ser um bicho de sete cabeças e passa a ser mais uma etapa natural do desenvolvimento.

Se você precisa de ajuda para colocar isso em prática, a Baita Site tem uma equipe especializada em sites, e-commerce, sistemas e inteligência artificial, com domínio total de WordPress e experiência em integrações modernas. Fale com a gente e veja como podemos acelerar o seu projeto.

Referências consultadas

Documentação oficial do Next.js, seção sobre Deploy, disponível em https://nextjs.org/docs/app/building-your-application/deploying, Documentação oficial da Vercel, página de Getting Started, disponível em https://vercel.com/docs/getting-started-with-vercel, Página oficial de preços da Vercel, consultada em 2026, disponível em https://vercel.com/pricing, Artigo "Deploying a Next.js App to Production" no blog da Vercel, disponível em https://vercel.com/guides/deploying-a-nextjs-app-to-vercel, Documentação sobre variáveis de ambiente na Vercel, disponível em https://vercel.com/docs/environment-variables