Estoy codificando un sitio web con Next.js e intenté agregar Google Tag Manager.
Seguí el tutorial en el ejemplo de Next.js Github pero por alguna razón no puedo acceder a mis variables de entorno.
Dice que mi variable no está definida.
Creé un archivo .env.local en la carpeta de mi proyecto (al mismo nivel que los componentes, node_modules, páginas, etc.)
En este archivo, creé una variable como esta (propósito de prueba):
NEXT_PUBLIC_DB_HOST=localhost Y en mi página de índice probé este código:
console.log("test ", process.env.NEXT_PUBLIC_DB_HOST); Pero en mi consola obtengo una "prueba indefinida".
Traté de poner mi variable en un archivo .env en su lugar, sin éxito.
Que estoy haciendo mal ?
Reiniciar el servidor funcionó para mí.
npm run dev > klout@0.1.0 dev > next dev Loaded env from [path]/.env.localEste entorno solo funciona en el lado del servidor. Para acceder a este envs en el lado del cliente, debe declarar en next.config.js
De esta manera:
module.exports = { reactStrictMode: true, env: { BASE_URL: process.env.BASE_URL, } }Después de pasar innumerables horas en esto, descubrí que hay un pequeño párrafo tanto en la documentación anterior como posterior a nextjs 9.4:
Next.js reemplazará process.env.customKey con 'my-value' en el momento de la compilación .
Para mantener seguros los secretos exclusivos del servidor, Next.js reemplaza process.env.* con los valores correctos en el momento de la compilación .
Las palabras clave son TIEMPO DE CONSTRUCCIÓN . Esto significa que debe haber configurado estas variables al ejecutar la next build y no (solo) al next start para que esté disponible para que el lado del cliente acceda a estas variables.
Cree .env (todos los entornos) , .env.development (entorno de desarrollo) y .env.production (entorno de producción).
Agregue el prefijo NEXT_PUBLIC a todas sus variables de entorno.
NEXT_PUBLIC_API_URL=http://localhost:3000/
proceso.env.NEXT_PUBLIC_API_URL
npm ejecutar dev
Para aquellos que usan NextJS +9 y buscan variables de entorno en el navegador, deben usar el prefijo NEXT_PUBLIC_ . Ejemplo:
NEXT_PUBLIC_ANALYTICS_ID=123456789Consulte la documentación como referencia .
Este es mi archivo next.config.js.
/** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, env: { BASE_URL: process.env.NEXT_PUBLIC_SITE_URL, }, }; module.exports = nextConfig;Reinicie el servidor y funcionó bien. usando Nextjs 12.1.0 con mecanografiado
En mi caso, estoy pegando REACT_APP_API_URL en lugar de NEXT_PUBLIC_API_URL.