Creación y uso de variables de entorno en Next.js

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:52

Creación y uso de variables de entorno en Next.js

Curso de Next.js 14

Clase 19 de 57

Clase 19 / 57

Recursos

Las variables de entorno son fundamentales en el desarrollo de software, especialmente cuando se trata de proteger información sensible y proporcionar flexibilidad en la configuración de aplicaciones. En el mundo del desarrollo web con Next.js, la gestión de estas variables se simplifica notablemente, lo que permite a los desarrolladores trabajar con seguridad y eficiencia. A continuación, exploraremos cómo se implementan en Next.js y te brindaremos algunos consejos para su uso correcto.

¿Qué son las variables de entorno y para qué se usan?

Las variables de entorno son configuraciones que se establecen fuera del código de una aplicación y pueden controlar el comportamiento de la misma en diferentes entornos. Estas variables son útiles para:

Ocultar información sensible como credenciales de autenticación o tokens de API.
Definir URLs internas para el uso en la aplicación.
Establecer valores globales accesibles desde cualquier parte del código.

Por ejemplo, cuando se integra Google Analytics, se puede almacenar el identificador de la aplicación en una variable de entorno.

¿Cómo crear y manejar variables de entorno en Next.js?

Para trabajar con variables de entorno en Next.js, se sigue un proceso sencillo:

Crea un archivo .env en el directorio raíz de tu proyecto. Este archivo no debe compartirse públicamente, ya que contiene datos sensibles.
Agrega .env al archivo .gitignore para evitar subirlo al repositorio de código.
Como buena práctica, crea un archivo .env.example que sirva de plantilla indicando las variables necesarias para el proyecto.

Las variables comúnmente se escriben en mayúsculas. Por ejemplo:

SHOPIFY_HOST_NAME=valor_del_host
SHOPIFY_API_KEY=valor_de_la_api_key

¿Cómo acceder a las variables de entorno en Next.js?

Para acceder a una variable de entorno en tu aplicación Next.js, puedes usar process.env.NOMBRE_DE_LA_VARIABLE. Esto las hace accesibles en el servidor y durante la generación de páginas estáticas o en funciones del servidor como las API de Next.js.

¿Cómo exponer variables de entorno al cliente?

Si necesitas exponer alguna variable al cliente, Next.js permite hacerlo de manera segura añadiendo el prefijo NEXT_PUBLIC_ a la variable. De esta forma, NEXT_PUBLIC_SHOPIFY_API_KEY estaría disponible en el ámbito del cliente.

Consejos de seguridad para el manejo de variables de entorno

Mantén siempre tus variables de entorno confidenciales, evitando compartirlas.
Utiliza variables de entorno principalmente en el servidor.
Emplea el prefijo NEXT_PUBLIC_ solo para información que no sea sensible y deba ser accesible públicamente, como IDs que requieran scripts de terceros (e.g., Google Analytics).

Next.js ofrece funcionalidades robustas y seguras para trabajar con variables de entorno, facilitando la implementación de prácticas recomendadas en tus proyectos web. Recuerda estos consejos y asegúrate de proteger adecuadamente tus datos y los de tus usuarios. ¡Sigue explorando y aprendiendo sobre Next.js para llevar tus habilidades de desarrollo al siguiente nivel!

Comentarios (5)5 comentarios

Santiago Mejia

Hace 2 años

.env

SHOPIFY_HOSTNAME="HOST_SHOPIFY"
SHOPIFY_API_KEY="SHOPIFY_API_KEY"

David Cubilos

Hace 3 años

en next para las variables de entorno no se utilizaba el archivo .env.local ?

Juan Diaz

si, te recomiendo revisar la documentacion de next. este otro video tambien me fue util

Juan Camilo Noreña López

En Next.js, además del archivo .env, también se utiliza .env.local para definir variables de entorno específicas del entorno local de desarrollo.

El archivo .env puede contener variables que se aplican a todos los entornos, mientras que .env.local es ideal para valores que no deben ser compartidos con otros desarrolladores, como claves API o credenciales locales.

Es una buena práctica mantener sensibles en el archivo .env.local y asegurarse de que no se suba al control de versiones, protegiendo así tus datos.

Daniel Riaño

Si tengo un archivo para desarrollo .env.development y otro para producción .env.production, ¿cómo configuro mi proyecto para que escoja una u otra?

Gracias :)

Para configurar tu proyecto en Next.js y seleccionar entre diferentes archivos de variables de entorno como .env.development y .env.production, puedes utilizar la variable de entorno NODE_ENV. Next.js automáticamente carga el archivo correspondiente dependiendo del entorno en el que estés ejecutando tu aplicación.

Crea tus archivos de entorno .env.development y .env.production en el directorio raíz.
Asegúrate de definir NODE_ENV al iniciar tu aplicación:
- Para desarrollo: NODE_ENV=development npm run dev
- Para producción: NODE_ENV=production npm start

Next.js se encargará de cargar el archivo adecuado según el valor de NODE_ENV.

Edward Camilo Oviedo Lozano

Para que las variables de entorno en Next.js funcionen adecuadamente, debes asegurarte de seguir estos pasos:

El archivo .env.example es solo un template que muestra cómo deben estar definidas las variables. Debes crear otro archivo llamado .env en la raíz del proyecto y definir tus variables de entorno allí.
Asegúrate de que tus variables en .env estén escritas con el prefijo NEXT_PUBLIC_ si deseas exponerlas al cliente. Por ejemplo: NEXT_PUBLIC_SHOPIFY_HOST_NAME=tu_valor.
Luego de hacer cambios en el archivo .env, reinicia tu servidor de desarrollo para que Next.js cargue las nuevas variables.

Si sigues estas indicaciones, deberías poder acceder a tus variables sin que aparezcan como indefinidas.

Federico Chafes

Osea que no es obligatorio hacer peticiones Graph QL a la Storefront API?

Platzi

La API Storefront de Shopify permite crear carritos de compra, acceder a checkouts y manejar información de usuarios a través de diferentes queries y mutations con GraphQL.

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Creación y uso de variables de entorno en Next.js