¿Cómo usar diferentes archivos .env con nextjs?

Si encuentras algún error en tu código o trabajo, recuerda probar siempre en un ambiente de testing antes añadir el código al trabajo final.

Solución:

Next 9.4 tiene soporte incorporado para archivos .env: https://nextjs.org/docs/basic-features/environment-variables

Pero, en caso de que desee tener varios archivos .env, como:

• .env.desarrollo
• .env.staging
• .env.prestaging
• .env.producción

Sería imposible hacerlo con un soporte integrado de variables env. Solo hay 3 entornos compatibles oficialmente por ahora, son: “desarrollo”, “prueba”, “producción”. Con next dev usas “desarrollo”, next build && next start utiliza el entorno de “producción”.

Si necesita compilar para un entorno de producción, pero usando “.env.staging”, por ejemplo, debe agregar el paquete env-cmd y agregar esta línea a su paquete.json:

"build:staging": "env-cmd -f .env.staging yarn build && yarn start"

A continuación, haría una compilación de producción con variables “.env.staging”.

npm i dotenv

Luego agregue el siguiente código para next.config.jsreinicia la aplicación y ¡listo!

// next.config.js

require('dotenv').config()
const webpack = require('webpack')

module.exports = 
  webpack: (config) => 
    config.plugins.push(
      new webpack.EnvironmentPlugin(process.env)
    )
    return config
  

Si su archivo .env no se encuentra en la misma carpeta que next.config.js agregue la ruta a su configuración como a continuación,

require('dotenv').config( path: 'path/to/.env' )

Puede tener diferentes archivos .env en nextjs de las siguientes dos maneras:

1. Uso del paquete env-cmd

Proporcione la ruta a su archivo de entorno en los scripts como:

"scripts": 
    "start": "env-cmd path/to/prod/env/file next start",
    "start:dev": "env-cmd path/to/prod/env/file next dev",   
    "build:dev": "env-cmd path/to/dev/env/file next build",
    "build:test": "env-cmd path/to/test/env/file next build",
    "build:stage": "env-cmd path/to/stage/env/file next build",
    "build": "env-cmd path/to/stage/prod/file next build",        
,

2. Usando el paquete dotenv

En su archivo next.config.js agregue lo siguiente:

require("dotenv").config( path: `$process.env.ENVIRONMENT` );

module.exports = 
      // your configs

y en sus scripts, proporcione esa variable ENTORNO como:

"scripts": 
    "start": "ENVIRONMENT=path/to/prod/env/file next start",
    "start:dev": "ENVIRONMENT=path/to/dev/env/file next dev",
    "build:dev": "ENVIRONMENT=path/to/dev/env/file next build",
    "build:test": "ENVIRONMENT=path/to/test/env/file next build",
    "build:stage": "ENVIRONMENT=path/to/stage/env/file next build",
    "build": "ENVIRONMENT=path/to/stage/prod/file next build",        
,

NOTA: La cuestión es no poner sus archivos .env* en la carpeta raíz, de lo contrario, NEXT seleccionará automáticamente de sus archivos .evn* y solo es compatible con las etapas de producción y desarrollo. Por lo tanto, ignorará otros archivos .env.my-stage.

Calificaciones y comentarios

Puedes añadir valor a nuestra información aportando tu experiencia en las anotaciones.

---

---

Utiliza Nuestro Buscador