知らないとハマる！Cloudflare × Next.js 環境変数の使い分け
はじめに
Next.jsをCloudflare Workersにデプロイした際に，ローカルでは動いていた環境変数がデプロイしてみるとundefinedになって困った経験はありませんか？
私自身も「Cloudflareの管理画面で設定したはずなのに，なぜか読み込まない…」とハマってしまった経験があります．
この記事では，Next.jsとCloudflare Workersにおける環境変数の仕様を整理し，確実な設定方法を解説します！
対象読者
- Next.jsを使った基本的な開発経験がある方
- Cloudflare WorkersへNext.jsアプリケーションをデプロイしようとしている方
- 環境変数の設定でエラーが出たり，意図通り読み込めず困っている方
記事を読むメリット
- Cloudflare Workers上で環境変数を正しく設定できるようになる．
-
NEXT_PUBLIC_の有無による挙動の違いと，その理由を理解できる．
結論
以下の場所にNEXT_PUBLIC_のプレフィックスをつけた環境変数を設置する
- Cloudflare Wrokersのダッシュボード → [対象プロジェクト] → 設定 → ビルド → 変数とシークレット
Cloudflare Workersの2種類の環境変数
Cloudflare Workersには，環境変数を設定できる箇所が2箇所あります．それぞれの役割を見ていきましょう．
設定 → 変数とシークレット
こちらの場所には以下のような説明がされています．
実行時に使用されるワーカーの環境変数とシークレットを定義します
実行時に使用されるワーカーの環境変数とシークレットは，ビルド時ではなく，ワーカーがリクエストを処理している最中に読み込まれ，利用される情報です．
そのため，リクエストごとに内容が変わる可能性がある情報や，セキュリティ上クライアンドサイドのソースコードに直接含めるべきでない情報を扱う際に利用します．(外部apiキーなど)
設定 → ビルド → 変数とシークレット
こちらの場所には以下のような説明がされています．
ビルド中に使用されるワーカーの変数とシークレットを構成します。
ビルド中に使用されるワーカーの変数とシークレットは，ビルド時にコードへ埋め込まれます．そのため，デプロイ後に変更しても反映されません．
stack overflowにて言及されているNext.jsの公式ドキュメントでは，環境変数の値をクライアント側でアクセスできるようにするために，ビルド時に値をインライン化します．
例として以下のような出力文があったとします．
console.log(process.env.NEXT_PUBLIC_ANALYTICS_ID)
環境変数は以下のように設定されているとします．
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
環境変数を設定していると，ビルド後の出力文はインライン化されるため，以下のようになります．
console.log('abcdefghijk')
このようなNext.jsの仕様のため，ビルド時に環境変数が設定されていないと，クライアント側でundefinedと解決されてしまいます．
まとめ
Next.jsでは，クライアントサイドで使用するNEXT_PUBLIC_の環境変数は，ビルド時に読み込まれる．
そのため，NEXT_PUBLIC_の環境変数を反映させたいなら，Cloudflare Wrokersのダッシュボード → [対象プロジェクト] → 設定 → ビルド → 変数とシークレットに設定する．
おわりに
最後までお読みいただきありがとうございました．
この記事が，CloudflareとNext.jsで開発する方の一助となれば幸いです．
Zennへの投稿はこれが初めてで，至らない点もあると思います．
内容に誤りや「もっとこうした方が良い」といった改善点などございましたら，お気軽にコメントでご指摘いただけますと大変嬉しいです😊
Discussion