Next.jsの環境変数について、便利と感じたことメモ

Next.jsの環境変数(.env)の種類

ファイル名	実行環境
.env	常に読み込み
.env.development	開発環境
.env.production	本番環境
.env.local	常に読み込み
.env.development.local	開発環境
.env.production.local	本番環境

.envのファイル名に応じて、開発環境と本番環境で切り替えるとこができる。
僕が使ったのは.env.localだけでした。

使って便利だと思ったこと

フロント側とバックエンド側で開発環境を分けていて、
どちらもローカル環境で動かしていた時、
APIと叩く際に、呼び出すすべてのエンドポイントで、
http://localhost/api/hoge
のような形で記述していると、stg環境に反映させる場合、
http://localhost/
と記述したすべてのソースを直さなければならなくなり、かなり面倒です。
また、ある程度開発が進んでいって、ローカル環境のAPIを叩かず、
stg環境に反映されているAPIを使うようになると、これまたすべて変更しないといけないので、
これも面倒です。
※下記のような場合

index.tsx

export async function test() {
  const res = await axios.get("http://localhost/api/hoge");
  console.log(res.data);
  return res;
}

なので、環境変数にAPIのパスを指定してあげて、
環境変数からパスを呼び出してあげれば、叩きたいパスが変わっても
環境変数を直してあげれば、すべてのパスが変わってくれます。

環境変数の定義

下記が参考例になります。

.env.local

ローカル環境のAPIを叩きたい時の例
NEXT_PUBLIC_API_ENDPOINT="http://localhost/"

.env.local

stg環境のAPIを叩きたい時の例
NEXT_PUBLIC_API_ENDPOINT="http://stg/"

環境変数を使用した場合の例

index.tsx

export async function test() {
  const res = await axios.get(`${NEXT_PUBLIC_API_ENDPOINT}api/hoge`);
  console.log(res.data);
  return res;
}

こうしてあげることで、定義された環境変数が反映されます。
localhostだったらこんな感じ
axios.get("http://localhost/api/hoge");

stgだったらこんな感じ
axios.get("http://stg/api/hoge");

以上、Next.jsの環境変数について、便利だと感じたことでした。
実際に動かしていないので、間違いなどあればご指摘いただけますと幸いです。🙇‍♂️