【Next.js】vercel専用の環境変数があることを知った話

Next.js 開発 vercel

ブログの開発環境のみにbasic認証を設置したかった。
そのため、環境変数NODE_ENVを使用した条件分岐を設置しようとした。
しかし、開発環境にも関わらず本番環境と同じような挙動をした。
調べたところ、この記事の方と全く同じ悩みだった。
記事を読む中で、vercel専用の環境変数があることを知った。
作業を進める中で詰まったポイントなので、忘れないようにまとめる。

開発環境

デプロイ先→vercel

開発環境	バージョン
Next.js	15.1.2
TypeScript	5.0.0
sass	1.83.0

vercelのデプロイコマンドについて

vercelにNext.jsをデプロイするときのコマンドは、初期設定のまま

next build

を使用している。
公式ドキュメントでは探しきれなかったが、記事を参考にするならば、next buildコマンドを使用したデプロイの場合、

NODE_ENV=production

が自動的にセットされてしまうらしい。
開発環境と本番環境で同じデプロイコマンドを使用しているため、開発環境であってもNODE_ENV=productionとなってしまい、開発環境であっても本番環境と同様の動きをしてしまっていたと見られる。

vercel専用の環境変数

System environment variablesページでは、vercel独自の環境変数が紹介されている。
中でも、VERCEL_ENVは、デプロイ、実行されている環境に合わせて、production、preview、developmentという環境に対応した値が格納される。
私のようにvercelに Next.jsで作成したアプリをデプロイしており、開発環境と本番環境を判断するために環境変数を使用したい場合、 VERCEL_ENVというvercel専用の環境変数を使用するのが適しているようだ。

個人開発では、今後もvercelを使用する予定なので、あくまでもvercelのみのお話であることを前提に覚えておきたい。