English 中文 العربية 日本語 Português

Next.js Deploy Implantação do Next.js

Última atualização: 2026-11-03

Next.js Deploy Implantação do Next.js

A Vercel é a primeira escolha para implantar o Next.js — configuração zero, com suporte a ISR, otimização de imagens e edge functions — mas você também pode hospedar por conta própria no Node ou exportar um site estático. A lista de verificação antes de ir ao ar é a mesma em qualquer lugar: variáveis de ambiente, uma build de produção, metadados de SEO e HTTPS no domínio; pular uma etapa pode deixar você com uma página em branco em produção.

GrupoEcossistema
TipoFerramenta
DesdeNext.js 14 / 15 hospedado na Vercel (recomendado); hospedagem própria precisa de Node 18+

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

# Verify the production build locally first
npm run build && npm start

# Deploy with the Vercel CLI (or push to GitHub for automatic deploys)
npx vercel           # preview environment
npx vercel --prod    # production environment

# Configure environment variables in the platform dashboard, never commit .env
NEXT_PUBLIC_API_BASE=https://api.example.com   # ends up in the client bundle
DATABASE_URL=...                               # server only (no NEXT_PUBLIC_ prefix)

⚙️ Parâmetros

vercel --prodImplanta o diretório atual em produção; sem --prod, produz um link de pré-visualização para revisão.
NEXT_PUBLIC_ prefixApenas variáveis com esse prefixo são empacotadas no código do cliente; toda outra variável permanece no servidor, o que mantém seus segredos protegidos.

Retorna：Sem valor de retorno — o fluxo de implantação está descrito na sintaxe e no exemplo.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Simulação: uma lista de verificação de implantação interativa cujas quatro caixas cobrem variáveis de ambiente, a build de produção, metadados de SEO e HTTPS do domínio. Ao marcá-las, o contador de prontidão na parte inferior cresce de 0/4, e quando tudo está marcado o status fica verde com Ready to launch; desmarcar qualquer item traz de volta a mensagem de pendência imediatamente.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso As variáveis de ambiente só surtem efeito no painel da plataforma de implantação ou no ambiente de build, e o .env.local nunca entra no repositório; após mudar uma variável, você precisa reimplantar para que ela seja injetada.
💡 Dica Aceite mudanças com implantações de pré-visualização: todo PR recebe automaticamente seu próprio link de pré-visualização, então confirme-o antes de mesclar e ir ao ar, em vez de testar em produção.
ℹ️ Informação Uma exportação estática (output: 'export') não suporta nem ISR nem rotas de API de servidor, então verifique se o projeto depende desses recursos antes de escolhê-la.
nextjs-app-router nextjs-data-fetching vite-setup
Mais casos em breve.

📚 Tutoriais Relacionados

Implantação e CI/CD
Lição 28 do tutorial: implantações na Vercel, gerenciamento de variáveis de ambiente e fluxos de lançamento automatizados.

❓ Perguntas Frequentes

P O Next.js pode ser implantado sem a Vercel?
R Sim. Você pode hospedar por conta própria no Node (npm start / Docker), implantar em um VPS com PM2 ou exportar um site puramente estático para qualquer hospedagem estática — apenas recursos como ISR e otimização de imagens precisarão de sua própria configuração, ou terão de ser descartados.
P Por que a página de produção fica em branco ou reclama de uma variável de ambiente ausente?
R Na maioria dos casos, uma variável NEXT_PUBLIC_ nunca foi configurada no painel da plataforma, ou foi configurada sem uma nova build — essas variáveis são injetadas em tempo de build, então uma nova implantação é necessária após a mudança.
P Preciso rodar comandos manualmente para cada implantação?
R Não. Conecte o repositório do GitHub e o push dispara uma implantação: um PR recebe um link de pré-visualização e mesclar na branch principal entra no ar automaticamente; você também pode personalizar o pipeline de CI/CD com GitHub Actions.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%