web-dev-qa-db-ja.com

次のjsで異なる.envファイルを使用するにはどうすればよいですか？

環境変数に異なる構成ファイルを用意し、次のプロジェクトでそれらを使用できるようにしたいと考えています。 doatenv https://github.com/zeit/next.js/tree/canary/examples/with-dotenv を使用した例を見ましたが、.envで変数を定義したくありませんファイルとconfig.next.jsファイルで定義します。なんらかの理由で.envファイルに変数を配置したが、config.next.jsファイルに変数を配置するのを忘れた場合、コードに問題が発生し始めます。より効率的に行う方法はありますか？

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"
},

My .env vars

TITULO=react, TypeScript, material ui App

コンポーネント

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;
reactjsenvironment-variablesnext.js
2
Cristian Camilo Flórez

dotenv-cli を使用して、.envの異なる環境に異なるpackage.jsonファイルを設定できます。何かのようなもの：

{
  ...
  "scripts": {
    "dev:production": "dotenv next", // Uses .env file
    "dev:staging": "dotenv -e .env.staging next" // Uses .env.staging file
  }
  ...
}
1
I'm Joe Too