Hago muchas llamadas a la API desde dentro de mis componentes usando fetch . Cada vez que tuve que escribir esta lógica para determinar en qué entorno estoy, creé una clase Utils que devuelve la URL base correcta:
export default class Utils { static get baseUrl() { const inDev = process.env.NODE_ENV !== 'production'; const { NEXT_PUBLIC_DEV_URL, NEXT_PUBLIC_PROD_URL } = process.env; return inDev ? NEXT_PUBLIC_DEV_URL : NEXT_PUBLIC_PROD_URL; } }Pero ahora recibo este error cuando se carga mi componente:
ReferenceError: process is not definedMiré a mi alrededor y descubrí que necesito marcar mis variables como NEXT_PUBLIC, así que lo hice, pero el problema persiste. ¿Cuál es la forma ideal de manejar esto?
Si desea exponer las variables ENV al cliente, puede usar publicRuntimeConfig dentro de su configuración de NextJS ( next.config.js ). Así es como podrías hacerlo:
publicRuntimeConfig: { myEnvVar: process.env.MY_ENV_VAR }Y luego en el archivo que le gustaría usar su variable ENV:
import getConfig from 'next/config'; const { publicRuntimeConfig } = getConfig(); const envVar = publicRuntimeConfig.myEnvVar // store in it a 'const' or do whatever you want with it,;Su clase en realidad puede verse así: -
export default class Utils { static get baseUrl() { return process.env.NEXT_PUBLIC_URL; } } El prefijo NEXT_PUBLIC debería funcionar bien para incluir los valores que se reemplazan en el momento de la compilación y se envían al navegador según los documentos .
En su archivo .env.development (o como se llame su archivo de entorno de desarrollo), puede tener NEXT_PUBLIC_URL apuntando a http://localhost:8000 y en su producción probablemente tendrá configuraciones de variables de entorno de producción utilizando una GUI (como en Netlify o Vercel), por lo que NEXT_PUBLIC_URL puede ser https://blablasite.com .
De cualquier manera, el prefijo NEXT_PUBLIC garantizará que, en el momento de la compilación, esos valores se recojan y se alineen antes de enviarlos al navegador.