[Next.js] ランタイム環境変数の注入

Next.jsで、.envはビルド時にハードコーディングされて組み込まれます。

しかし、ビルド時ではなく、ビルドされたイメージを実行する際に、環境変数を設定したいというニーズが数多く存在します。

通常、local、dev、qa、prodのように環境を分けて扱うためです。

では、どのように実現できるのでしょうか？

多くの場合、以下の記事と内容はほぼ同じです。

しかし、上記の記事はWindowsを無視しています。

package.jsonのスクリプトにUnixの文法を記述していることが分かります。

汚いUnixを使わない、清廉潔白で、クリーンで思いやりのあるWindowsユーザーは、上記スクリプトを使用できません。

したがって、クリーンで思いやりのあるWindowsユーザーは、Unixユーザーへの配慮から、2つのOSで問題なく動作するスクリプトを代わりに記述する必要があります。

解決方法は簡単です。

上記と同じ動作をするスクリプトを記述すれば良いのです。

上記のコマンドでcross-envをインストールします。

そして、上記で述べたstartコマンドを以下のように修正すれば解決です。

しかし、スクリプトが長くなりすぎて見にくくなるだけでなく、devコマンドにも追加する必要があります。

そのため、筆者は上記のように整理しました。