Estoy intentando hacer deploy de una aplicación Next.js en Vercel y necesito configurar las variables de ambiente (API keys, URLs, etc). Creé un archivo .env.local aquí en mi máquina que funciona, pero cuando hago push al GitHub y Vercel hace el build, la aplicación no consigue acceder a esas variables. ¿Cómo hago para pasar eso de forma segura a Vercel?
El archivo `.env.local` nunca se sube a producción porque Git lo ignora por defecto (está en `.gitignore`), así que Vercel no tiene acceso a esas variables cuando hace el deploy. Necesitas configurar las variables directamente en el panel de Vercel. Entra al proyecto en el dashboard de Vercel, ve a Settings > Environment Variables y añade cada variable que necesites - nombre y valor. Si tienes variables que solo necesitas en desarrollo (como pruebas locales), marca la casilla "Development" solamente. Para las que tu Next.js necesita usar tanto en el servidor como en el cliente, las añades sin restricciones de ambiente.
Para variables que deben quedar solo en el servidor (como API keys sensibles), las pones normalmente y las usas en el código dentro de funciones del lado del servidor - getServerSideProps, API routes, Server Components. Next.js automáticamente no las expone al navegador. Si necesitas acceder a una variable en el cliente, prefija con NEXT_PUBLIC_ en el nombre (tipo NEXT_PUBLIC_API_URL) y queda disponible en el navegador, pero usa esto solo para datos que no son sensibles.
Después que configuras todo en Vercel, haces un nuevo push a GitHub aunque no hayas cambiado nada, que Vercel va a hacer rebuild con las variables que setaste. Si estás usando preview deployments (deploy automático de pull requests), configura las variables para que corran también en esos ambientes de prueba yendo a la sección de "Preview" en las settings. Consejo: si tienes muchas variables, copia un bloque entero de un ambiente a otro en lugar de añadir una por una.
Ve al dashboard de Vercel, abre el proyecto, ve a Settings > Environment Variables y pega ahí las claves que usas en .env.local. Crea una variable para cada una (API_URL, API_KEY, lo que necesites) y marca en cuál ambiente funciona cada una - Development, Preview, Production, o los tres. Después de eso cuando Vercel hace el build, inyecta esas variables en el proceso y la aplicación puede acceder a través de `process.env.NOMBRE_DE_LA_VARIABLE`.
Ahora, el punto que la gente frecuentemente se olvida: si estás usando variables que solo pueden ser accedidas en el servidor (como database passwords o API keys secretas), necesitas prefijado con `NEXT_PUBLIC_` solo aquellas que van al client-side. Todo lo que no tiene ese prefijo se queda seguro en el servidor durante el build. Si pones una clave sensible con `NEXT_PUBLIC_`, se filtra al JavaScript que el navegador descarga - ahí ya no es más seguro. Entonces cuidado con esa convención, porque es fácil equivocarse.
Un consejo útil también es copiar la estructura de tu .env.local en un archivo llamado .env.example (o .env.local.example), quita los valores reales, y commitea eso en Git. Así quien vaya a trabajar en el proyecto sabe exactamente qué variables necesita configurar tanto localmente como en Vercel.
Iniciar sesiónpara responder.
