Fazer o deploy de uma aplicação Next.js na Vercel é uma das formas mais simples de colocar um projeto Next.js em produção. A Vercel é desenvolvida pela equipe por trás do Next.js e possui suporte nativo ao framework, incluindo builds, rotas dinâmicas, renderização no servidor e geração estática.

O método mais recomendado é conectar o projeto a um repositório GitHub. Depois disso, cada git push pode gerar automaticamente um novo deploy.

1. Verifique se o projeto funciona localmente

Antes de enviar o projeto para a Vercel, entre na pasta da aplicação:

cd meu-projeto

Instale as dependências:

npm install

Depois execute:

npm run dev

O Next.js deverá iniciar o servidor de desenvolvimento.

Abra no navegador o endereço local exibido pelo terminal, normalmente:

http://localhost:3000

Se o projeto não funcionar localmente, primeiro corrija o problema antes de fazer o deploy.

---

2. Confira o package.json

Um projeto Next.js normalmente possui scripts semelhantes a estes:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

O comando mais importante para o deploy é:

npm run build

Teste o build localmente:

npm run build

Se aparecer algum erro, corrija antes de enviar para a Vercel.

---

3. Crie um repositório no GitHub

Se o projeto ainda não estiver usando Git, execute dentro da pasta dele:

git init

Adicione os arquivos:

git add .

Faça o primeiro commit:

git commit -m "Primeiro deploy"

Depois crie um repositório no GitHub.

Por exemplo:

meu-app-next

Conecte o projeto local ao repositório:

git remote add origin SEU_REPOSITORIO

E envie os arquivos:

git branch -M main
git push -u origin main

A Vercel pode importar diretamente projetos hospedados no GitHub e detectar automaticamente que se trata de uma aplicação Next.js.

---

4. Crie o projeto na Vercel

Entre na sua conta da Vercel.

Depois escolha:

Add New → Project

Na lista de repositórios, encontre o seu projeto.

Clique em:

Import

A Vercel deverá identificar automaticamente:

Framework Preset: Next.js

Em um projeto Next.js comum, normalmente você não precisa alterar as configurações padrão.

---

5. Confira as configurações do projeto

Para uma aplicação Next.js normal, as configurações geralmente ficam assim:

Framework Preset:
Next.js

Root Directory:
./

Build Command:
next build

Output Directory:
.next

Install Command:
npm install

Se estiver usando pnpm, yarn ou bun, a Vercel também pode detectar o gerenciador utilizado pelo projeto.

Não altere essas opções sem necessidade.

---

6. Configure as variáveis de ambiente

Se seu projeto utiliza um arquivo:

.env.local

não envie esse arquivo para o GitHub contendo senhas ou chaves secretas.

Por exemplo:

DATABASE_URL=...
API_SECRET=...
NEXT_PUBLIC_API_URL=...

Na Vercel, entre nas configurações do projeto e procure:

Settings → Environment Variables

Adicione cada variável individualmente.

Por exemplo:

DATABASE_URL
API_SECRET
NEXT_PUBLIC_API_URL

E informe os respectivos valores.

Atenção

Variáveis que começam com:

NEXT_PUBLIC_

podem ser disponibilizadas no navegador.

Portanto, não coloque senhas, tokens privados ou chaves secretas em variáveis NEXT_PUBLIC_.

---

7. Clique em Deploy

Depois de configurar o projeto, clique em:

Deploy

A Vercel começará automaticamente a:

1. Baixar o código;
2. Instalar as dependências;
3. Executar o build;
4. Preparar a aplicação;
5. Publicar o projeto.

Durante o processo, você poderá acompanhar os logs do build.

Quando terminar corretamente, o projeto aparecerá como:

Ready

A Vercel gera então um endereço de produção para a aplicação.

---

8. Teste o site

Abra o endereço fornecido pela Vercel.

Teste:

• Página inicial;
• Menu;
• Formulários;
• Login;
• Cadastro;
• APIs;
• Imagens;
• Rotas dinâmicas;
• Banco de dados;
• Autenticação;
• Uploads;
• Responsividade.

Não fique apenas na página inicial.

Uma aplicação pode concluir o build corretamente e ainda possuir erros em determinadas rotas.

---

9. O que acontece quando você altera o código?

Uma das grandes vantagens de usar GitHub + Vercel é o deploy automático.

Depois de modificar o projeto:

git add .

Faça o commit:

git commit -m "Atualiza aplicação"

E envie:

git push

A Vercel detectará o novo commit e iniciará outro deploy automaticamente.

O fluxo fica:

Editar código
     ↓
git add .
     ↓
git commit
     ↓
git push
     ↓
GitHub
     ↓
Vercel
     ↓
Build
     ↓
Deploy
     ↓
Site atualizado

---

10. Deploy de teste e produção

A Vercel trabalha muito bem com diferentes branches.

Por exemplo:

main

pode representar a versão de produção.

Já uma branch como:

desenvolvimento

pode gerar uma versão de preview para você testar antes de colocar a alteração em produção.

Isso permite testar mudanças sem mexer diretamente na versão principal.

---

11. Como fazer deploy pelo terminal

Também é possível utilizar a CLI da Vercel.

Instale:

npm install -g vercel

Depois faça login:

vercel login

Entre na pasta do projeto:

cd meu-projeto

E execute:

vercel

A CLI fará algumas perguntas para associar o projeto à sua conta e iniciar o deploy.

Para fazer um deploy de produção pelo terminal, você pode utilizar:

vercel --prod

---

12. Como conectar um domínio próprio

Depois que o projeto estiver funcionando na Vercel, você pode adicionar um domínio próprio nas configurações do projeto.

Procure:

Settings → Domains

Adicione o domínio desejado.

A Vercel mostrará os registros DNS necessários para apontar o domínio para o projeto.

Depois que o DNS estiver configurado corretamente, o domínio poderá ser utilizado como endereço principal da aplicação.

---

13. Se o projeto estiver em uma subpasta

Isso é importante principalmente em projetos maiores.

Imagine um repositório assim:

meu-repositorio/
├── apps/
│   ├── site/
│   │   ├── package.json
│   │   ├── app/
│   │   └── next.config.js
│   │
│   └── admin/
│       ├── package.json
│       └── app/
│
└── package.json

Se você quiser publicar apenas:

apps/site

configure na Vercel:

Root Directory:
apps/site

Em monorepos, a Vercel permite definir o diretório da aplicação e configurar o build especificamente para aquele projeto.

---

14. Erro no Build

Se aparecer:

Build Failed

não entre em pânico.

Abra os Build Logs.

Procure a primeira mensagem de erro real.

Por exemplo:

Module not found

significa normalmente que alguma dependência ou importação não foi encontrada.

Outro exemplo:

Type error

indica um problema de TypeScript.

Também pode aparecer:

Environment variable not found

Nesse caso, provavelmente falta configurar uma variável de ambiente na Vercel.

---

15. Funciona no computador, mas não na Vercel

Esse é um problema bastante comum.

Normalmente acontece por diferenças entre o ambiente local e o ambiente de produção.

Verifique principalmente:

Variáveis de ambiente

O .env.local existente no seu computador não é automaticamente uma configuração de produção.

Sistema de arquivos

Não considere o armazenamento local da aplicação como um disco permanente para guardar dados importantes.

Para arquivos persistentes, utilize uma solução de armazenamento apropriada.

Banco de dados

Confira se a aplicação consegue acessar o banco de dados a partir do ambiente da Vercel.

URLs

Verifique se você não deixou endereços como:

localhost:3000

no código de produção.

---

16. Não coloque o .env no GitHub

Seu projeto normalmente deve possuir um .gitignore.

Por exemplo:

node_modules
.next
.env
.env.local
.env.production

Isso evita que informações privadas sejam acidentalmente enviadas para o repositório.

Depois coloque essas variáveis na Vercel.

---

17. Uma configuração básica recomendada

Para um projeto Next.js convencional:

GitHub
   ↓
Repositório
   ↓
Vercel
   ↓
Framework: Next.js
   ↓
Build: next build
   ↓
Output: .next
   ↓
Environment Variables
   ↓
Deploy

Depois:

Alterou código
      ↓
git commit
      ↓
git push
      ↓
Vercel detecta alteração
      ↓
Novo build
      ↓
Novo deploy

Conclusão

O jeito mais simples de colocar um app Next.js na Vercel é:

git init
git add .
git commit -m "Primeiro deploy"
git remote add origin SEU_REPOSITORIO
git branch -M main
git push -u origin main

Depois, na Vercel:

Add New → Project → Importar GitHub → Next.js → Deploy

A partir daí, você pode simplesmente continuar trabalhando normalmente e usar:

git add .
git commit -m "Nova alteração"
git push

para disparar novos deploys automaticamente.

A integração Git da Vercel foi justamente projetada para esse fluxo contínuo de desenvolvimento e publicação.