React TypeScript .envファイルの値を取得できない

React TypeScriptアプリケーションで環境変数を使用する

.envファイルをルートディレクトリに作成しましたが、値が取得できなくて、ハマりました。

解決方法　.env.localファイルに名前を変更

dotenvをインストールしてindex.tsxなどでmportして取得する方法も試しましたが、やはり.envファイルではダメで.env.localだと取得できるようになりました。

という事で.env.localに環境変数を定義し、使いたい所でprocess.envで値を取得することができました。dotenvはインストールする必要がありませんでした。

//.env.local

REACT_APP_API_KEY=1234abcd  //Reactの場合は、REACT_APP_を最初につける

//note.tsx

interface EnvType {
  REACT_APP_API_KEY: string;
}

const env = process.env as unknown as EnvType;
const apiKey = env.REACT_APP_API_KEY;