Variáveis de ambiente | Next.js

Neste vídeo, exploramos como o Next.js gerencia variáveis de ambiente de forma diferenciada entre o lado do servidor e o cliente (browser), demonstrando como configurar e acessar essas variáveis em diferentes contextos.

Arquivos de Ambiente no Next.js

O Next.js utiliza arquivos .env na raiz do projeto para armazenar variáveis de ambiente. Existem variações específicas para diferentes ambientes:

• .env - Arquivo base para todas as variáveis
• .env.local - Tem prioridade sobre os outros (ótimo para desenvolvimento local)
• .env.development - Usado apenas em desenvolvimento (npm run dev)
• .env.production - Usado em produção (npm run build + npm run start)

O Next.js carrega automaticamente o arquivo correto baseado no ambiente de execução, sendo que o .env.local sempre tem precedência quando existe.

Isolamento entre Servidor e Cliente

Uma característica importante do Next.js é como ele trata as variáveis de ambiente de forma diferente entre:

• Server Components: Componentes renderizados no servidor têm acesso a todas as variáveis de ambiente
• Client Components: Componentes executados no browser não têm acesso às variáveis por padrão

Para expor uma variável ao cliente, é necessário prefixá-la com NEXT_PUBLIC_. Por exemplo:

1NEXT_PUBLIC_BASE_URL=http://localhost:3000

Server Components vs Client Components

No exemplo demonstrado, vimos que:

• Na Home (Server Component), os console.log aparecem no terminal do servidor
• No Perfil (Client Component), os logs aparecem no console do navegador

Isso acontece porque Server Components são renderizados completamente no servidor antes de serem enviados ao cliente, enquanto Client Components têm seu código JavaScript executado no browser.

Ambientes Dinâmicos

Podemos controlar qual arquivo de ambiente será carregado através da variável NODE_ENV:

1NODE_ENV=staging npm run build

Isso fará com que o Next.js procure por um arquivo .env.staging para carregar as variáveis específicas desse ambiente.

Considerações Finais

O sistema de variáveis de ambiente no Next.js oferece um controle granular importante para desenvolvimento seguro:

• Segurança: Variáveis sensíveis (como chaves de API) ficam protegidas no servidor
• Flexibilidade: Diferentes ambientes podem ter configurações específicas
• Performance: Apenas as variáveis realmente necessárias são enviadas ao cliente

Para projetos mais complexos, vale considerar:

• Usar nomes consistentes para variáveis entre ambientes
• Documentar todas as variáveis necessárias em um .env.example
• Nunca comitar arquivos .env com dados sensíveis no versionamento
• Validar variáveis de ambiente na inicialização da aplicação

Este sistema de variáveis de ambiente é particularmente útil em aplicações que precisam de diferentes configurações para desenvolvimento, teste e produção, mantendo a segurança de informações sensíveis que não devem ser expostas no código do cliente.