🧰 Variables de entorno (.env.local)

🧰 Variables de entorno (.env.local)

Aprende cómo usar variables de entorno en Next.js para proteger información sensible y configurar distintos entornos (desarrollo, pruebas y producción).

---

🔒 ¿Qué son las variables de entorno?

Las variables de entorno son valores externos al código fuente que se utilizan para configurar tu aplicación, sin necesidad de exponer información sensible como contraseñas, claves de API o URLs privadas.

⚠️ Importante: Nunca subas tus archivos .env a un repositorio público.

📁 Tipos de archivos de entorno en Next.js

Next.js reconoce automáticamente estos archivos si existen en la raíz del proyecto:

• .env → Variables comunes para todos los entornos.
• .env.development → Solo para entorno de desarrollo.
• .env.production → Solo para producción.
• .env.local → Configuración local (no se debe subir a Git).

El archivo más usado es .env.local, ideal para tu entorno local de desarrollo.

🧩 Ejemplo básico de uso

Supongamos que quieres guardar una clave API para conectarte a un servicio externo.

📄 .env.local

NEXT_PUBLIC_API_URL=https://api.misitio.com
SECRET_API_KEY=12345abcd6789
      

En tu código, puedes acceder a estas variables usando process.env. Pero hay una diferencia importante:

• Las variables que empiecen con NEXT_PUBLIC_ pueden usarse en el frontend.
• Las demás (SECRET_, por ejemplo) solo se usan en el servidor.

💻 pages/index.js

export default function Home() {
  console.log('API pública:', process.env.NEXT_PUBLIC_API_URL);
  // ❌ Esto no funcionará en el cliente
  console.log('Clave secreta:', process.env.SECRET_API_KEY); 

  return (
    <div>
      <h1>Conectado a la API: {process.env.NEXT_PUBLIC_API_URL}</h1>
    </div>
  );
}
      

🚀 Variables de entorno en producción (Vercel)

Si desplegas tu aplicación en Vercel, puedes configurar las variables directamente desde el panel web:

1. Ve a tu proyecto en Vercel Dashboard.
2. Haz clic en Settings → Environment Variables.
3. Agrega tus claves (por ejemplo NEXT_PUBLIC_API_URL).
4. Selecciona el entorno: Development, Preview o Production.

Configuración de variables de entorno en Vercel

🧠 Ejemplo avanzado: conexión con API usando variable protegida

En este ejemplo, la conexión a la API se hace en el servidor (no en el cliente) para mantener la seguridad.

📄 pages/api/data.js

export default async function handler(req, res) {
  const apiKey = process.env.SECRET_API_KEY;
  const response = await fetch('https://api.misitio.com/data', {
    headers: { Authorization: `Bearer ${apiKey}` }
  });
  const data = await response.json();

  res.status(200).json(data);
}
      

Así mantienes tus claves ocultas y seguras dentro del entorno del servidor 🛡️.

---

💡 Consejo: si cambias o agregas variables, recuerda reiniciar el servidor de desarrollo con npm run dev.

← Volver al índice