Llaves de alcance público (browser) y privadas (server)

¿Cómo maneja Next.js las variables de entorno?

Cuando se trabaja con Next.js, la carga de variables de entorno se maneja de una manera particular que facilita el flujo de trabajo y agrega una capa adicional de seguridad. Next.js por defecto carga el archivo .env.local, lo cual simplifica mucho el proceso de configuración. Sin embargo, hay un detalle crucial que debe considerarse: Next.js maneja de manera diferente las claves dependiendo de si se encuentran en el servidor o en el navegador, lo cual es esencial comprender para evitar errores y facilitarnos el proceso de debugging.

¿Cómo se carga una variable de entorno en Next.js?

El archivo .env.local es cargado por defecto, lo que significa que no necesitas hacer configuraciones adicionales para utilizar las variables de entorno que allí se encuentren. Este archivo es el punto de partida para todas las variables de entorno, lo que facilita su utilización durante el desarrollo.

NEXT_PUBLIC_SPACE_ID=tu_valor_aqui

¿Qué diferencia hay entre el servidor y el navegador?

Al trabajar con Next.js, el comportamiento de las variables de entorno depende del entorno en el que se encuentren:

• Servidor: Las variables de entorno solo están disponibles en Node.js y en las páginas de API de Next.js. Si intentas usar una variable dentro de un componente React del cliente, sin una designación específica, el valor será undefined.
• Cliente: Para hacer que una variable esté disponible tanto en el servidor como en el cliente, debe estar prefijada con NEXT_PUBLIC_. Esto indica que el valor será accesible en ambos contextos y debe considerarse seguro para el acceso público.

¿Por qué es importante el prefijo NEXT_PUBLIC_?

Este prefijo actúa como un indicador visual y funcional de que una variable es pública y está destinada a ser utilizada tanto en el servidor como en el cliente. Esto es vital para la seguridad, garantizando que cualquier valor expuesto de esta manera no ponga en riesgo la integridad de tu aplicación.

Al utilizar este prefijo, asegúrate de que la información expuesta esté destinada para uso público, de modo que, incluso si es accesible, no represente un riesgo para tus datos sensiblemente protegidos.

Beneficios de este enfoque

• Clara delimitación: La diferenciación entre variables del servidor y del cliente es inmediatamente visible al equipo de desarrollo, minimizando malentendidos y configuraciones erradas.
• Seguridad: Previene fugas de datos accidentales al navegador, protegiendo información sensible.
• Facilidad de uso: Al tener las variables del entorno correctamente configuradas, ahorras tiempo durante la fase de despliegue y debugging.

Con esta comprensión, podrás manejar las variables de entorno en Next.js de manera efectiva, asegurándote de proteger tus datos y facilitar el desarrollo de tus aplicaciones. Y recuerda, en cada proyecto, evalúa cuidadosamente qué variables necesitas exponer al cliente y cuáles deben quedar exclusivamente en el servidor.