Variables d'environnement (env)

Depuis la sortie de Next.js 9.4, nous offrons une expérience plus intuitive et ergonomique pour l'ajout de variables d'environnement. Essayez-la !

Bon à savoir : les variables d'environnement spécifiées de cette manière seront toujours incluses dans le bundle JavaScript. Le préfixe NEXT_PUBLIC_ devant le nom de la variable n'a d'effet que lorsqu'elles sont spécifiées via l'environnement ou les fichiers .env.

Pour ajouter des variables d'environnement au bundle JavaScript, ouvrez next.config.js et ajoutez la configuration env :

next.config.js

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

Vous pouvez maintenant accéder à process.env.customKey dans votre code. Par exemple :

function Page() {
  return <h1>La valeur de customKey est : {process.env.customKey}</h1>
}

export default Page

Next.js remplacera process.env.customKey par 'my-value' au moment de la compilation. Tenter de déstructurer les variables process.env ne fonctionnera pas en raison de la nature du DefinePlugin de webpack.

Par exemple, la ligne suivante :

return <h1>La valeur de customKey est : {process.env.customKey}</h1>

Se transformera en :

return <h1>La valeur de customKey est : {'my-value'}</h1>