env

Core Idea

API legada para injetar variáveis de ambiente diretamente no bundle JavaScript via config; substituída pelo suporte nativo a .env desde o Next.js 9.4.

Key Concepts

• env (config): objeto de chave/valor injetado em process.env no bundle no build time; sempre incluído no bundle, sem precisar do prefixo NEXT_PUBLIC_
• Substituição em build time: process.env.customKey é literalmente substituído pelo valor via webpack DefinePlugin

Code Examples

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

• O que demonstra: expor customKey no bundle.

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}

• O que demonstra: acesso à variável no código, que vira literal 'my-value' após build.

Anti-patterns

• API legada, não recomendada para uso novo: preferir variáveis de ambiente via .env files (guia de environment variables)
• Destructurar process.env: não funciona devido à natureza do DefinePlugin do webpack, que substitui referências literais, não o objeto inteiro

Key Takeaways

1. Só usar para compatibilidade retroativa; o caminho recomendado é o suporte nativo a .env/NEXT_PUBLIC_
2. Toda variável definida aqui vai pro bundle do client, nunca usar para segredos
3. Substituição é textual em build time, então desestruturar process.env quebra o mecanismo

Connects To

• environment-variables (guia): substituto moderno e recomendado desta API