Las variables de entorno next.js no están definidas (Next.js 10.0.5)

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 ?

Este entorno solo funciona en el lado del servidor. Para acceder a este envs en el lado del cliente, debe declarar en next.config.js

Por aquí:

module.exports = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  }
}

1. Crear .env (todos los entornos), .env.desarrollo (entorno de desarrollo), y .env.producción (entorno de producción).

2. Agregue el prefijo NEXT_PUBLIC a todas sus variables de entorno.

NEXT_PUBLIC_API_URL=http://localhost:3000/

3. Usar con el prefijo process.env

proceso.env.NEXT_PUBLIC_API_URL

4. Detenga el servidor y reinícielo:

npm ejecutar dev

5. Espero que funcione. Esta solución para la última versión de nextJs (más de 9)

Para aquellos que usan NextJS +9 y buscan variables de entorno en el navegador, deben usar el NEXT_PUBLIC_ prefijo. Ejemplo:

NEXT_PUBLIC_ANALYTICS_ID=123456789

Ver documentación de referencia.

Reiniciar el servidor funcionó para mí.

1. Editar y guardar .env.local
2. Detenga el servidor y reinícielo, npm run dev
3. Debería obtener una salida en la siguiente línea como esta:

> klout@0.1.0 dev
> next dev

Loaded env from [path]/.env.local

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:

• (Anterior a 9.4) https://nextjs.org/docs/api-reference/next.config.js/environment-variables (igual que esta respuesta)
  

  Next.js reemplazará process.env.customKey con ‘my-value’ en Tiempo de construcción.

• (^9.4) https://nextjs.org/docs/basic-features/environment-variables
  

  Para mantener seguros los secretos exclusivos del servidor, Next.js reemplaza process.env.* con los valores correctos en Tiempo de construcción.

palabras clave siendo TIEMPO DE CONSTRUCCIÓN. Esto significa que debe haber configurado estas variables al ejecutar next build y no (solo) en next start estar disponible para que el lado del cliente acceda a estas variables.

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

Agregando con la versión más reciente del documentación en esto, v12+.

Usando el archivo next.config.js puede especificar variables de servidor y cliente:

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
}

Todavía puede usar un archivo env.local y pasar la variable al archivo next.config.js. Por ejemplo:

 publicRuntimeConfig: {
   DB_URL: process.env.DB_URL
 }

Y luego puedes acceder a la variable de esta manera:

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
publicRuntimeConfig.DB_URL;