Variables de entorno de Next.js

En este artículo, vamos a ver cómo usar variables de entorno en Next.js. Las variables de entorno en Next.js son una forma de establecer los valores de configuración que utiliza su aplicación. Se pueden usar para almacenar datos como el nombre de su empresa, el puerto en el que se ejecutará su aplicación o cualquier otro valor de configuración que necesite.

Puede establecer variables de entorno en Next.js mediante el archivo .env . Tienes que crear este archivo en la raíz de tu proyecto. Puede usar este archivo para establecer variables de entorno para su aplicación.

Siga los pasos a continuación para agregar variables de entorno en la aplicación Next.js:

Creación de la aplicación Next.js:

Paso 1: para crear una nueva aplicación NextJs, ejecute el siguiente comando en su terminal:

npx create-next-app GFG

Paso 2: después de crear la carpeta de su proyecto (es decir, GFG), muévase a ella usando el siguiente comando:

cd GFG

Estructura del proyecto: Se verá así.

Ejemplo: agregue variables de entorno, por ejemplo, creemos una nueva variable de entorno y mostremos el valor de esa variable en la página de inicio. Cree un nuevo archivo .env y agregue el siguiente contenido.

NEXT_PUBLIC_DEMO_VARIABLE=random_value

Ahora en su archivo index.js agregue el siguiente contenido:

// Importing the Link component
import Link from 'next/link'
 
export default function Homepage() {
    return (
        <div>
            This is the Homepage page - GeeksforGeeks
            <h2>
                Environment Variable :-
                {process.env.NEXT_PUBLIC_DEMO_VARIABLE}
             </h2>
        </div>
    )
}

Paso para ejecutar la aplicación: Ahora ejecute la aplicación con el siguiente comando:

npm run dev

Salida: Aquí estamos accediendo al valor de la variable de entorno usando ‘process.env’.