Variables de entorno (env)

Desde el lanzamiento de Next.js 9.4 ahora tenemos una experiencia más intuitiva y ergonómica para agregar variables de entorno. ¡Pruébalo!

Es bueno saberlo: las variables de entorno especificadas de esta manera siempre se incluirán en el paquete JavaScript, el prefijo NEXT_PUBLIC_ en el nombre de la variable solo tiene efecto cuando se especifican a través del entorno o archivos .env.

Para agregar variables de entorno al paquete JavaScript, abra next.config.js y agregue la configuración env:

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

Ahora puede acceder a process.env.customKey en su código. Por ejemplo:

function Page() {
  return <h1>El valor de customKey es: {process.env.customKey}</h1>
}

export default Page

Next.js reemplazará process.env.customKey con 'my-value' durante el tiempo de compilación. Intentar desestructurar variables de process.env no funcionará debido a la naturaleza del DefinePlugin de webpack.

Por ejemplo, la siguiente línea:

return <h1>El valor de customKey es: {process.env.customKey}</h1>

Terminará siendo:

return <h1>El valor de customKey es: {'my-value'}</h1>