Crear un .env para Next.js y React

Tiempo de lectura: 2 minutos

Ho vamos a crear un .env para utilizar con Next.js en React.

Para usar variables de entorno en Next.js y React, necesitas crear un archivo .env.local en la raíz del proyecto y definir tus variables de entorno allí. Luego, en el código, accedes a esas variables usando process.env.

Pasos para configurar el .env en tu proyecto Next.js:

1. Crea el archivo .env.local en la raíz de tu proyecto. Agrega las variables en este formato (asegúrate de usar el prefijo NEXT_PUBLIC_ para que puedan ser accesibles en el cliente):

   NEXT_PUBLIC_BASE_URL="tu_url_aqui"

Debes añadir tu url en «tu_url_aqui»

2. Accede a las variables en el código usando process.env:

   export const baseURL = process.env.NEXT_PUBLIC_BASE_URL;

3. Reinicia el servidor de desarrollo para que Next.js reconozca las nuevas variables de entorno.

• Usa el prefijo NEXT_PUBLIC_ para cualquier variable de entorno que necesites en el código del cliente. Sin este prefijo, Next.js no las expondrá al navegador.
• Evita incluir valores sensibles en variables que usarás en el cliente, ya que estarán expuestas.

Esto hará que tus URLs se lean desde el archivo .env.local, simplificando la gestión entre entornos de desarrollo y producción.

Distintos .env

.env.local: Para configuraciones específicas del entorno local. Este archivo es ideal para variables que solo deben usarse en tu máquina de desarrollo y no deben compartirse en producción o en control de versiones (deberías incluirlo en el .gitignore).

.env.development: Cargado solo en modo de desarrollo (next dev). Puedes definir variables específicas para el entorno de desarrollo.

.env.production: Cargado solo en producción (next start). Úsalo para configurar variables que quieras que estén disponibles solo cuando la aplicación esté en producción.

.env.test: Cargado solo en el entorno de pruebas. Úsalo si tienes configuraciones o variables específicas para tus pruebas.

.env: Variables de entorno comunes que se cargarán en todos los entornos, pero generalmente no es recomendado ya que prefieres tener archivos específicos como los anteriores.