Tô tentando fazer deploy de uma aplicação Next.js no Vercel e preciso colocar as variáveis de ambiente (API keys, URLs, etc). Criei um arquivo .env.local aqui na máquina que funciona, mas quando faço push pro GitHub e o Vercel faz o build, a aplicação não consegue acessar essas variáveis. Como eu faço pra passar isso de forma segura pro Vercel?
O .env.local nunca vai pra produção porque o Git ignora ele por padrão (tá no .gitignore), então o Vercel não tem acesso a essas variáveis quando faz o deploy. Você precisa configurar as variáveis diretamente no painel do Vercel. Entra no projeto no dashboard do Vercel, vai em Settings > Environment Variables e adiciona cada variável que precisa - nome e valor. Se tiver variáveis que só precisam em desenvolvimento (tipo testes locais), marca a caixa "Development" apenas. Para as que seu Next.js precisa usar tanto no servidor quanto no cliente, adiciona sem restrições de ambiente.
Pra variáveis que devem ficar só no servidor (como API keys sensíveis), coloca elas normalmente e usa no código dentro de funções do lado do servidor - getServerSideProps, API routes, Server Components. O Next.js automaticamente não expõe essas pro navegador. Se precisar acessar uma variável no cliente, prefixe com NEXT_PUBLIC_ no nome (tipo NEXT_PUBLIC_API_URL) e ela fica disponível no browser, mas usa isso só pra dados que não são sensíveis.
Depois que configura tudo no Vercel, faz um novo push pro GitHub mesmo sem mudar nada, que o Vercel vai fazer rebuild com as variáveis que você setou. Se tá usando preview deployments (deploy automático de pull requests), configura as variáveis pra rodar também nesses ambientes de teste indo na seção de "Preview" nas settings. Dica: se tiver muitas variáveis, copia um bloco inteiro de um ambiente pra outro em vez de adicionar uma por uma.
Vai no dashboard do Vercel, abre o projeto, vai em Settings > Environment Variables e cola lá as chaves que tu usas no .env.local. Cria uma variável pra cada uma (API_URL, API_KEY, o que precisar) e marca em qual ambiente cada uma funciona - Development, Preview, Production, ou os três. Depois disso quando o Vercel faz o build, ele injeta essas variáveis no processo e a aplicação consegue acessar via `process.env.NOME_DA_VARIAVEL`.
Agora, o ponto que galera frequentemente esquece: se tu tá usando variáveis que só podem ser acessadas no servidor (tipo database passwords ou API keys secretas), tu precisa prefixar com `NEXT_PUBLIC_` só aquelas que vão pro client-side. Tudo que não tem esse prefixo fica seguro no servidor durante o build. Se colocar uma chave sensível com `NEXT_PUBLIC_`, ela vaza pro JavaScript que o navegador baixa - aí não é mais seguro. Então cuidado com essa convenção, porque é fácil errar.
Uma dica útil também é copiar a estrutura do seu .env.local num arquivo chamado .env.example (ou .env.local.example), remove os valores reais, e commita isso no Git. Assim quem for trabalhar no projeto sabe exatamente quais variáveis precisa configurar tanto localmente quanto no Vercel.
Entrarpara responder.
