Leyendo .env con Next.js.

05 Jun, 2023 Programación 0

Estoy tratando de leer .env en next.js dentro de next.config.js

Así es como se ve:

require("dotenv").config({ path: require("find-config")(".env") })

console.log(process.env.API_URL)

module.exports = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  baseURL: process.env.API_URL,
}

y esto imprime en la consola del servidor el valor de .env.

Ahora, si uso baseUrl en el componente así:

import config from "../../next.config";

const axiosInstance = axios.create({ baseURL: config.baseURL });

entonces el código incluso no compila:

Module not found: Can't resolve 'fs'

Import trace for requested module:
./next.config.js

¿Cuál puede ser el problema?

davy.ai

June 5, 2023 at 10:09 pm

El problema es que el módulo fs, que es un módulo integrado de Node.js para trabajar con sistemas de archivos, no está disponible para el código del lado del cliente en Next.js. En este caso, el paquete find-config intenta utilizar el módulo fs para encontrar el archivo .env, lo que está causando el error.

Para solucionar este problema, puedes utilizar el paquete dotenv-webpack en lugar de dotenv. Este paquete se integra con Webpack, que es una herramienta de construcción utilizada por Next.js, para cargar variables de entorno en el código del lado del cliente.

Así es como puedes actualizar tu archivo next.config.js para usar dotenv-webpack:

const Dotenv = require('dotenv-webpack');

module.exports = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  plugins: [
    new Dotenv({
      path: path.join(__dirname, '.env'),
      systemvars: true,
    }),
  ],
};

Con esta configuración, el complemento dotenv-webpack cargará el archivo .env y hará que las variables de entorno estén disponibles tanto en el código del servidor como del lado del cliente.

Luego, en tu componente, puedes importar las variables process.env directamente sin tener que utilizar el archivo next.config.js:

const axiosInstance = axios.create({ baseURL: process.env.API_URL });

Esto debería solucionar el problema y permitirte utilizar las variables de entorno en tu código del lado del cliente.

Answer

davy.ai

June 5, 2023 at 10:09 pm
El problema es que el módulo fs, que es un módulo integrado de Node.js para trabajar con sistemas de archivos, no está disponible para el código del lado del cliente en Next.js. En este caso, el paquete find-config intenta utilizar el módulo fs para encontrar el archivo .env, lo que está causando el error.

Para solucionar este problema, puedes utilizar el paquete dotenv-webpack en lugar de dotenv. Este paquete se integra con Webpack, que es una herramienta de construcción utilizada por Next.js, para cargar variables de entorno en el código del lado del cliente.

Así es como puedes actualizar tu archivo next.config.js para usar dotenv-webpack:
```
const Dotenv = require('dotenv-webpack');

module.exports = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  plugins: [
    new Dotenv({
      path: path.join(__dirname, '.env'),
      systemvars: true,
    }),
  ],
};
```
Con esta configuración, el complemento dotenv-webpack cargará el archivo .env y hará que las variables de entorno estén disponibles tanto en el código del servidor como del lado del cliente.

Luego, en tu componente, puedes importar las variables process.env directamente sin tener que utilizar el archivo next.config.js:
```
const axiosInstance = axios.create({ baseURL: process.env.API_URL });
```
Esto debería solucionar el problema y permitirte utilizar las variables de entorno en tu código del lado del cliente.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Leyendo .env con Next.js.

Answer

davy.ai