Vercel: importar em um minuto
Aula 13 de 26 do curso “Vibe coding”. Grátis, com animações e teste.
Vercel e Next.js
Vercel é uma hospedagem que os desenvolvedores frontend adoram. A mesma empresa faz o Next.js, um framework popular, ou seja, um esqueleto pronto para sites em JavaScript. Muitos construtores com IA e agentes criam projetos em Next.js por padrão. Exemplo: você montou num construtor o portfólio para entrar em design e passou o código para o GitHub. A Vercel entende um projeto assim de cara.
Importar do GitHub em três passos
O caminho do esquema vai da esquerda para a direita. Importar: você entra com o GitHub e escolhe o repositório do portfólio. Configurações encontradas: a Vercel descobre sozinha o framework, o comando de build e a pasta de saída; normalmente não precisa mexer em nada. Deploy: você inicia e o build roda. No fim você ganha um link do site que já dá para mandar aos amigos. O nome próprio do site você conecta depois, na aula de domínios.
Prévia para cada Pull Request
O resto é como na aula de deploy: um push na main atualiza o site no ar. E cada Pull Request ganha seu link de prévia, o chip do esquema. Exemplo: um agente refez numa branch a página de trabalhos. Você abre a prévia no celular e confere. Na Vercel dá para deixar um comentário em cima da página de prévia: “essa imagem está cortada”. Tudo corrigido? Você faz merge.
Variáveis de ambiente
Variáveis de ambiente (env vars) são configurações e chaves que a hospedagem entrega ao seu código quando ele roda, em vez de guardá-las no repositório. Na Vercel você define separado para três ambientes, o painel do esquema. Production: o site no ar. Preview: os links de prévia. Development: rodar no seu computador. Exemplo: em Preview uma chave de pagamento de teste, em Production a real. Mudou uma variável? Faça um novo deploy.
Rollback em um clique
Cada deploy fica numa lista, a fileira de baixo do esquema. Exemplo: você fez merge e sumiram todos os trabalhos do site no ar. Não peça para a IA consertar às pressas direto na main. Clique em Rollback no último deploy que funcionava, e ele volta a ser o site no ar quase na hora, sem build novo. Depois procure o erro com calma numa branch. Resumindo: primeiro volta, depois conserta.
Vercel ou Cloudflare?
Para um primeiro site, os dois servem: conectou o GitHub, ganhou build, prévias e site no ar, como no esquema. A Vercel é a escolha padrão para projetos em Next.js, que os construtores costumam gerar. A Cloudflare é mais forte em DNS, proteção e Workers. Na dúvida? Fique com aquela em que o projeto fez build sem problema. Costuma ter plano grátis; veja os limites no site. Confira se o serviço está disponível no seu país. Pratique no simulador da Vercel.
Teste-se
- O que a Vercel faz logo depois de importar um repositório?
Resposta certa: Detecta sozinha o framework e as configurações de build. A Vercel reconhece o framework, o comando de build e a pasta de saída. O domínio é conectado à parte, quando você quiser. - Uma versão nova quebrou o site no ar. O que fazer primeiro?
Resposta certa: Voltar para o último deploy que funcionava. O rollback traz de volta a versão que funciona quase na hora, sem build novo. Conserte com calma depois, numa branch. - Por que definir env vars diferentes para Production e Preview?
Resposta certa: Para as prévias não mexerem nas chaves reais. Em Preview você pode ter chaves de teste e as reais só em Production. Assim testar numa branch não mexe em dinheiro nem dados reais.