Next.jsを運用するある筆者が、環境変数の落とし穴について実体験をもとに解説しています。NEXT_PUBLIC_*で始まる環境変数はビルド時にソースコードへ直接インライン化(焼き込み)されるため、Vercelのダッシュボード上で値を更新しても、再ビルドしない限り古い値が本番環境で使われ続けます。筆者はこの問題でライセンスキーが古いまま動き続けるトラブルを経験しました。
対処法として、同じコミットのまま再ビルドするvercel redeploy <デプロイURL>コマンドが紹介されており、本番とPreview環境の両方を再デプロイする必要があるとしています。またVercelの「Sensitive」環境変数機能は値を後から読み出せず、vercel env pull実行時には空文字として取得される、Production/Previewのみに適用可能でDevelopment環境には対応しないといった特有の仕様にも触れています。Sensitive指定した環境変数を更新する際は、既存の値を一度削除してから新たに追加し直す必要がある点にも注意を促しています。
環境変数が正しく反映されているかは、ダッシュボードの表示ではなく実際に配信されているJavaScriptバンドルの中身で確認すべきだと述べています。
出典が伝えている要点
- NEXT_PUBLIC_で始まる環境変数はビルド時にソースコードへ直接インライン化される
- NEXT_PUBLIC_*環境変数はビルド時点の値が成果物(ビルド済みJSバンドル)に焼き付く
- 環境変数を更新しても再ビルドしない限り古い値が配信され続ける
- 筆者はVercelのダッシュボードで環境変数を新しい値に更新したが、本番のアプリは古いライセンスキーで動作し続けた
- 対処法として、同じコミットのまま再ビルドする
vercel redeploy <デプロイURL>コマンドが紹介されている - 本番とPreview環境の両方を再デプロイする必要がある
- Vercelの環境変数「Sensitive」指定機能では、値を後から読み出すことができない
- Sensitive指定された環境変数は
vercel env pullを実行すると空文字として取得される - Vercelの「Sensitive」環境変数機能はProduction/Previewのみに適用可能で、Development環境には対応していない
- Sensitive環境変数を更新する際は、既存の値を削除してから新たに追加するプロセスが必要
- 環境変数が正しく反映されているかはダッシュボードの表示ではなく、実際に配信されているJavaScriptバンドルの中身で確認すべきとされている