Ferramentas Dev
Deploy Next.js na Vercel: Tutorial Completo
Colocar um projeto Next.js no ar na Vercel demora menos de 10 minutos se voce souber o caminho. Aqui ta o tutorial completo — da preparacao do projeto
CrazyStack
Carregando
Colocar um projeto Next.js no ar na Vercel demora menos de 10 minutos se voce souber o caminho. Aqui ta o tutorial completo — da preparacao do projeto
Deploy Next.js na Vercel: Tutorial Completo. Colocar um projeto Next.js no ar na Vercel demora menos de 10 minutos se voce souber o caminho. Aqui ta o tutorial completo — da preparacao do projeto ao dominio customizado com SSL, passando por variaveis de ambiente e os erros mais comuns.
Vercel e a plataforma de deploy que a propria equipe do Next.js usa e desenvolve. Isso significa que todos os recursos do framework — Server Components, App Router, ISR, Edge Functions, Server Actions — funcionam perfeitamente sem configuracao adicional. O workflow de deploy e simples: voce conecta o repositorio GitHub, define as variaveis de ambiente e a Vercel cuida do resto.
Antes de fazer o deploy, confirme que o build local funciona sem erros. Rode npm run build no terminal — se houver erros de TypeScript, ESLint ou qualquer outro, o build na Vercel vai falhar pelo mesmo motivo. Corrigir localmente antes de fazer push economiza tempo de debugging remoto. Um erro comum nessa etapa: variaveis de ambiente usadas em tempo de build (como chaves de API) que nao estao definidas localmente — certifique-se de ter o .env.local preenchido corretamente.
Verifique o arquivo .gitignore e confirme que .env, .env.local, .env.production e qualquer arquivo com segredos esta ignorado. Commitar variaveis de ambiente no Git e um erro grave de seguranca que pode expor suas chaves de API publicamente. O .gitignore padrao do create-next-app ja inclui esses arquivos, mas sempre vale confirmar antes do primeiro push.
Onde comprar dominio barato e como conectar na Vercel e Netlify.
Guia completo de hospedagem gratis com Vercel, Netlify e Cloudflare.
Acesse vercel.com e crie uma conta (pode usar o proprio GitHub pra login). No dashboard, clique em 'Add New Project'. Voce vai ver a opcao de importar de um repositorio Git — conecte sua conta GitHub se ainda nao conectou. Isso da permissao pra Vercel acessar seus repositorios. Procure o repositorio do seu projeto Next.js na lista e clique em Import.
A Vercel detecta automaticamente que e um projeto Next.js e configura o Build Command como next build e o Output Directory como .next. Nao mude esses valores a menos que voce tenha uma configuracao de build customizada. O Root Directory deve ser a raiz do projeto — se o Next.js estiver em uma subpasta (ex: em um monorepo), ajuste esse campo pra apontar pra pasta correta.
Antes de clicar em Deploy, expanda a secao 'Environment Variables'. Aqui voce adiciona todas as variaveis que estao no seu .env.local — DATABASE_URL, NEXTAUTH_SECRET, chaves de API externas e qualquer outro segredo. Cada variavel tem um nome e um valor. Voce pode definir variaveis diferentes pra cada ambiente: Production, Preview e Development.
Uma dica importante: variaveis publicas no Next.js (prefixadas com NEXT_PUBLIC_) ficam expostas no bundle do cliente — nunca coloque segredos nelas. Use NEXT_PUBLIC_ apenas pra valores que podem ser vistos por qualquer pessoa. Variaveis sem o prefixo so ficam disponiveis no servidor. Essa distincao e critica e causa muitos erros de seguranca em projetos de iniciantes.
Depois do primeiro deploy, a Vercel configura um webhook no seu repositorio GitHub automaticamente. Cada push dispara um deploy. Pushes pra branches diferentes de main criam um deploy de Preview — uma URL unica tipo meu-projeto-git-nome-da-branch.vercel.app onde voce pode testar as mudancas antes de mergear. Pushes pra main (ou a branch de producao que voce definiu) atualizam o site de producao.
O historico de deployments fica visivel no painel Vercel — com status (success, error), tempo de build, logs e a URL de cada preview. Voce pode reverter pra qualquer deployment anterior com um clique. Isso e muito util quando um deploy quebra alguma coisa em producao — rollback em segundos sem precisar fazer revert no Git.
Com o projeto deployed, va em Settings > Domains no painel do projeto. Clique em 'Add Domain' e digite o seu dominio (ex: meusite.com.br). A Vercel vai mostrar os registros DNS que voce precisa configurar no seu registrador de dominio. Pra a maioria dos casos, sao dois registros: um registro A apontando pra 76.76.21.21 e um registro CNAME com cname.vercel-dns.com.
Acesse o painel do seu registrador (Registro.br, Namecheap, GoDaddy, etc), va na configuracao de DNS do dominio e adicione os registros. A propagacao de DNS leva de 5 minutos ate 48 horas — geralmente menos de 1 hora. Quando a Vercel confirmar que o dominio esta ativo, o SSL via Let's Encrypt e provisionado automaticamente. Nao ha nenhum custo adicional pelo SSL. O tutorial especifico de como comprar e configurar o dominio esta em /como-comprar-dominio-barato-conectar-site-gratis.
O plano Hobby da Vercel e gratis e inclui: 100GB de bandwidth por mes, 6000 minutos de build, 100 deployments por dia, Edge Functions ilimitadas, funcoes serverless com timeout de 10 segundos. Para a maioria dos projetos pessoais e portfolios, esses limites sao mais do que suficientes. O ponto critico: o plano Hobby proibe uso comercial nos termos de servico.
Pra site que vai gerar receita — seja por AdSense, afiliados, venda de produto ou qualquer forma de monetizacao — o plano correto e o Pro ($20/mes por membro). A Vercel nao bloqueia tecnicamente o plano Hobby de sites comerciais, mas os termos dao direito a eles suspender a conta. O risco nao compensa pra um negocio real. Pra projeto sem monetizacao, portfolio, ou site de estudo, o Hobby resolve perfeitamente.
Erro 'Module not found': pacote listado no codigo mas nao esta no package.json. Solucao: npm install nome-do-pacote e commit do package.json e package-lock.json. Erro 'Environment variable X is not defined': variavel usada no codigo nao foi configurada no painel da Vercel. Solucao: va em Settings > Environment Variables e adicione a variavel. Erro de TypeScript: o build da Vercel roda com checagem de tipos estrita. Qualquer erro de TS que voce estava ignorando localmente vai travar o build. Corrija todos os erros antes de fazer push.
Erro de timeout em funcoes serverless: funcoes no plano Hobby tem timeout de 10 segundos. Se a funcao demora mais (ex: chamada a banco de dados lenta, processamento pesado), vai dar timeout. Otimize a funcao ou migre pro plano Pro (timeout ate 300s). Erro 'Cannot find module' pra dependencia nativa: algumas dependencias com codigo nativo (ex: sharp pra processamento de imagem) precisam de configuracao especial na Vercel. Verifique a documentacao da dependencia pra instrucoes de deploy.
Pra projeto pessoal sem fins comerciais, sim. O plano Hobby nao tem vencimento e os limites sao generosos pra uso nao-comercial. A limitacao e de natureza comercial, nao tecnica. Se o site comecar a gerar receita, o upgrade pro Pro e necessario pelos termos de servico. Enquanto for portfolio, projeto open-source ou aprendizado, o plano gratis e suficiente por tempo indeterminado.
Sim. Vercel suporta Astro, Nuxt, SvelteKit, Remix, Angular, Vite, Create React App e varios outros. A deteccao automatica identifica o framework e configura o build corretamente. Mas o suporte de primeira classe — com otimizacoes especificas de infraestrutura — e mesmo pra Next.js. Pra outros frameworks, a Vercel funciona bem mas sem as otimizacoes especificas que o Next.js recebe.