nextjsでタグマネージャーを導入する際に、本番環境、検証環境、開発環境といった環境ごとにコンテナのIDを指定することにした。

ただnextjsでは用意されたenvと適応コマンドがすでに割りついているっぽい。

環境ファイル役割
.env.localnext dev
.env.developmentnext dev
.env.productionnext build/next start

参考:Next.jsで環境ファイル(env)別ビルドを行う 参考:Add support for custom environments

今回は、同じnext startで3つの環境を作成したいけど、前述の通りそれだと.env.productionしか呼び出すことができない。

そこでenv-cmdを使用する。

#Using custom env file path To use a custom env filename or path, pass the flag. This is a major breaking change from prior versions < 9.0.0-f

とあるように、アプリをビルド/実行するときに特定の.envファイルを選択することができるパッケージ。

.env.prod
.env.stag
.env.local

と3つのEnvを用意し下記のようなScriptを作成すれば、それぞれのScriptごとに対応するEnvを読みに行ってくれる。

    "prod": "env-cmd -f .env.prod next build && next start",
    "stag": "env-cmd -f .env.stag next build && next start",
    "local": "env-cmd -f .env.local next build && next start",