Comment utiliser différents fichiers .env avec les prochains js?

Question

Je voudrais avoir différents fichiers de configuration pour les variables d'environnement et pouvoir les utiliser dans mon prochain projet. J'ai vu l'exemple avec doatenv https://github.com/zeit/next.js/tree/canary/examples/with-dotenv mais je n'aime pas définir les variables dans le .env et les définir également dans le fichier config.next.js. si pour une raison quelconque, je mets les variables dans le fichier .env mais oublie de les mettre dans le fichier config.next.js, le code commence à avoir des problèmes. Y a-t-il un moyen de le faire plus efficacement?

Mes scripts dans pachage.json:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "lint": "eslint pages --ext .ts,.tsx,.js",
    "test": "jest",
    "commit": "git-cz",
    "dev:production": "dotenv next"
},

Mes vars .env

TITULO=react, TypeScript, material ui App

Composant

import { NextPage }          from 'next';
import { FunctionComponent } from 'react';

interface HelloWorldProps {
  nombre: string,
  saludo?: string
}


const HelloWorld: FunctionComponent<HelloWorldProps> = ({ nombre, saludo = 'noches' }: HelloWorldProps) => (
  <>
    <h1>Hola {nombre} buenas {saludo}</h1>
    {/* eslint-disable-next-line multiline-ternary */}
    <h2>{process.env.TITULO ? 'hola' : 'adios'}</h2>
  </>
);

const Home: NextPage = () => <HelloWorld nombre="cristian" />;

export default Home;

Answer 1

Vous pouvez utiliser dotenv-cli puis configurer différents .env fichiers pour différents environnements dans votre package.json. Quelque chose comme:

{
  ...
  "scripts": {
    "dev:production": "dotenv next", // Uses .env file
    "dev:staging": "dotenv -e .env.staging next" // Uses .env.staging file
  }
  ...
}