Next.js - Variables de entorno

Next.js, tiene soporte para publicar variables de entorno en el nodo que podemos usar para conectarnos al servidor, base de datos, etc. Para esto, necesitamos crear un archivo .env.local en el directorio raíz. También podemos crear .env.production.

Crear .env.local

Cree .env.local en el directorio raíz con el siguiente contenido.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Crea env.js

Cree una página llamada env.js con los siguientes contenidos en el directorio de páginas / publicaciones donde usaremos las variables de entorno usando process.env.

import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost(props) {
   return (
      <>
         <Container>
            <Head>
               <title>Environment Variables</title>
            </Head>
            <h1>Database Credentials</h1>
               <p>Host: {props.host}</p>
               <p>Username: {props.username}</p>
               <p>Password: {props.password}</p>
         </Container>
      </>	  
   )
}

export async function getStaticProps() {
   // Connect to Database using DB properties
   return {
      props: { 
         host: process.env.DB_HOST,
         username: process.env.DB_USER,
         password: process.env.DB_PASS
      }
   }
}

Ahora inicie el servidor.

Next.JS detectará .env.local y mostrará el siguiente mensaje en la consola.

npm run dev

> [email protected] dev D:\Node\nextjs
> next

ready - started server on http://localhost:3000
info  - Loaded env from D:\Node\nextjs\.env.local
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /posts/env
wait  - compiling...
event - compiled successfully

Verificar salida

Abra localhost: 3000 / posts / env en un navegador y verá el siguiente resultado.

↰ Previous page Next page ↱