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.