Next.js: cómo usar las variables de entorno

Como framework Node.js optimizado, Next.js tiene todo lo que un desarrollador puede necesitar y más. Dentro de este marco, las capacidades predeterminadas incluyen asegurarse de que las aplicaciones sean estables y puedan soportar la prueba del tiempo y cualquier vulnerabilidad que pueda surgir en su camino.

En su propia website oficial, lo definen de esta manera “Next.js es un framework React flexible que le brinda elementos básicos para crear aplicaciones web rápidas. Por framework, nos referimos a que Next.js maneja las herramientas y la configuración necesarias para React y proporciona estructura, características y optimizaciones adicionales para su aplicación”.

En este blog, hablaremos un poco sobre cómo usar las variables de entorno de esta multifuncional tecnología. 

¿Qué son las variables de entorno de Next.js?

Next.js, en su más reciente actualización, viene con soporte para variables de entorno, lo que le permitirá al desarrollador: 

• Usar .env.local para cargar variables de entorno
• Exponer las variables de entorno al navegador con el prefijo NEXT_PUBLIC_

Cargando las variables de entorno

El soporte para este tipo de variables viene ya integrado en la reciente actualización de Next.js, este es un ejemplo usando .env.local:

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

Esto carga process.env.DB_HOST, process.env.DB_USER y process.env.DB_PASS en el entorno Node.js automáticamente, lo que le permite usarlos en los métodos de obtención de datos y rutas API de Next.js.

Cómo exponer las variables de entorno al navegador

Por defecto, las variables de ambiente solo están disponibles en el ambiente de Node.js, esto significa que no estarán expuestas al navegador. Para lograrlo, se debe prefijar una variable utilizando NEXT_PUBLIC_

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

En el website de Next.js explican “Esto carga process.env.NEXT_PUBLIC_ANALYTICS_ID en el entorno de Node.js automáticamente, lo que le permite usarlo en cualquier parte de su código. El valor se insertará en JavaScript enviado al navegador debido al prefijo NEXT_PUBLIC_. Esta incorporación se produce en el momento de la compilación, por lo que es necesario establecer varios NEXT_PUBLIC_ envs cuando se compila el proyecto”.

// pages/index.js
import setupAnalyticsService from '../lib/my-analytics-service'

// 'NEXT_PUBLIC_ANALYTICS_ID' can be used here as it's prefixed by 'NEXT_PUBLIC_'.
// It will be transformed at build time to `setupAnalyticsService('abcdefghijk')`.
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

function HomePage() {
  return <h1>Hello World</h1>
}

export default HomePage

Variables de entorno por defecto

Solo una variable es necesaria .env.local, pero puede que necesites utilizar otras variables para el ambiente de desarrollo (next dev) y producción (next start).

“Next.js le permite establecer valores predeterminados en .env (todos los entornos), .env.development (entorno de desarrollo) y .env.production (entorno de producción)” explican en un documento publicado en el sitio web oficial.

Fase de prueba de las variables de entorno

Una tercera opción disponible para estas variables es la de prueba: test, se puede utilizar de esta manera .env.test para poner a prueba el entorno. Next.js no cargará las variables de entorno de .env.development o .env.production en el entorno de prueba.

Hay diferencias entre la fase de prueba con respecto a la fase de desarrollo y producción que el usuario debe considerar. La mayor diferencia a tener en cuenta es que .emv.local no se cargará debido a que espera que las pruebas produzcan los mismos resultados en todos.

En la página oficial explican “De esta manera, cada ejecución de prueba usará los mismos valores predeterminados de entorno en diferentes ejecuciones al ignorar su .env.local (que está destinado a anular el conjunto predeterminado)”.

// The below can be used in a Jest global setup file or similar for your testing set-up
import { loadEnvConfig } from '@next/env'

export default async () => {
  const projectDir = process.cwd()
  loadEnvConfig(projectDir)
}

Estas son las distintas maneras en las que se pueden utilizar las variables de entorno en Next.js, una de sus múltiples funciones para el desarrollo. 

En Rootstack contamos con un equipo de expertos en Next.js que han podido solucionar problemas técnicos de nuestros clientes internacionales. Si quieres formar parte de este equipo, solo haz clic aquí y uno de nuestros reclutadores se pondrá en contacto contigo.

Te recomendamos en video