[解決済み] nextjsで異なる.envファイルを使用するには？

質問

環境変数に異なる設定ファイルを用意し、次のプロジェクトで使用できるようにしたいのですが。私は、次のような例を見ました。 ドットエンブ .

しかし、私は.envファイルに変数を定義し、config.next.jsファイルにも定義するのが好きではありません。何らかの理由で.envファイルに変数を置き、config.next.jsファイルに置き忘れると、コードは問題を起こしはじめます。 もっと効率的に行う方法はないでしょうか？

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

私の.envバー

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;

解決するには？

Next 9.4 では、.env ファイルをビルトインでサポートしています。 https://nextjs.org/docs/basic-features/environment-variables

しかし、万が一、複数の.envファイルを持ちたい場合は、次のようにします。

• .env.development
• .env.staging（ステージング
• .env.prestaging
• .env.production

ビルトインのenv変数のサポートでは不可能でしょう。今のところ公式にサポートされている環境は、開発環境、テスト環境、本番環境の3つだけです。とのことです。 next dev は、"development" を使用します。 next build && next start は本番環境です。

本番環境向けにビルドする必要があるが、例えば ".env.staging" を使用する場合、以下のように追加する必要があります。 env-cmd パッケージを作成し、package.json にこの行を追加してください。

"build:staging": "env-cmd -f .env.staging yarn build && yarn start"

次に、".env.staging" 変数を使って本番ビルドを行います。