ハコザキです！

NextjsでWebアプリケーションを開発している際、
普段はMac環境で開発していて、実際のデプロイ先はWindows ServerのIIS みたいなシーンで環境変数が読み込まれず困っていました…

当初npm scriptsを以下のようにしており、かなりイケてない状態でした..

```
  "scripts": {
    "dev": "cat .env.dev > .env.local && next dev & tsc --watch --noEmit",
    "build:dev": "cat .env.dev > .env.local && next build",
    "build:stg": "cat .env.stg > .env.local && next build",
    "build:prod": "cat .env.prod > .env.local && next build",
    "start": "next start"
  },
```

Nextjsにおける環境変数においては、
ローカルでビルドする際、ステージング用・本番用envファイルの切り替え や
MacやWidnowsの実行シェル環境などで頭を悩ませました。

※PowerShellでnpm scripts実行する際のデフォルトシェルはcmd（コマンドプロンプト）なので、catなどのUNIX系コマンドが使えなかったりします…（PowerShellで動かしているからいけるのでは..?と思って詰まりました…）

今回は、dotenv-cliを使うことでOS環境に依存せず環境変数を読み込むことができました！

dotenv-cliのインストール

まずは以下のようにライブラリをインストールします。

npm install  dotenv-cli --save-dev

続いて、package.jsonを以下のように編集します。

{
...
 "scripts": {
    "dev": "dotenv -e .env.dev -- next dev",
    "build:dev": "dotenv -e .env.dev -- next build",
    "build:stg": "dotenv -e .env.stg -- next build",
    "build:prod": "dotenv -e .env.prod -- next build",
    "start": "next start"
  },
...
}

このようにすることで、普段のMacローカル環境で、開発用のenv、ステージング用のenv、本番用のenvを切り替えてビルドすることができます！
実際にnpm run startでビルド時に応じたファイルを元にサーバー起動するのでローカルでの動作確認も可能になります。

終わり

dotenv-cli を使うことで、環境変数の管理がシンプルになり、MacとWindowsの違いを意識せずに開発できるようになりました！
特に異なるOS間での環境変数の扱いに悩んでいる方にはオススメです。
同じような課題を持っている方は、ぜひ試してみてください！