Next.js - Variables d'environnement
Next.js prend en charge la publication de variables d'environnement dans le nœud que nous pouvons utiliser pour nous connecter au serveur, à la base de données, etc. Pour cela, nous devons créer un fichier .env.local dans le répertoire racine. Nous pouvons également créer .env.production.
Créer .env.local
Créez .env.local dans le répertoire racine avec le contenu suivant.
DB_HOST=localhost
DB_USER=tutorialspoint
DB_PASS=nextjs
Créer env.js
Créez une page nommée env.js avec le contenu suivant dans le répertoire pages / posts où nous utiliserons les variables d'environnement en utilisant 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
}
}
}
Démarrez maintenant le serveur.
Next.JS détectera .env.local et affichera le message suivant sur la 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
Vérifier la sortie
Ouvrez localhost: 3000 / posts / env dans un navigateur et vous verrez la sortie suivante.
![](https://assets.edu.lat/nextjs/images/env.jpg)