Next.js - Variabili d'ambiente

Next.js, ha il supporto per la pubblicazione di variabili di ambiente nel nodo che possiamo usare per la connessione al server, database ecc. Per questo, dobbiamo creare il file .env.local nella directory principale. Possiamo anche creare .env.production.

Crea .env.local

Crea .env.local nella directory principale con i seguenti contenuti.

DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs

Crea env.js

Crea una pagina chiamata env.js con i seguenti contenuti nella directory pages / posts dove useremo le variabili d'ambiente 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
      }
   }
}

Ora avvia il server.

Next.JS rileverà .env.local e mostrerà il seguente messaggio sulla console.

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

Verifica output

Apri localhost: 3000 / posts / env in un browser e vedrai il seguente output.