【Next.js】環境変数のプレフィクス

プレフィクス NEXT_PUBLIC_　の扱い

• ビルド時にクライアント側の JavaScript に埋め込まれる
• ブラウザの DevTools からも見えてしまうため、ユーザーに知られても問題ない値だけにするべき
• 例：Google Analytics の測定ID など
• SSG（静的生成）を使っているページで参照している場合は、その値がビルド時に固定される点に注意（環境ごとにビルドが必要になる）。

プレフィクスなしの場合

• サーバーサイドでしか参照できない
• APIキーなどの秘密情報は必ずこちらに入れる必要がある
• 例：外部APIの認証キー、DB接続情報

# サーバーサイド専用（非公開）
OPENWEATHER_API_KEY=xxxxxx  

# クライアントに公開してもよいもの
NEXT_PUBLIC_GA_ID=G-XXXXXXX

まとめ

環境変数はランタイム時・ビルド時どちらでも使用は可能。デフォルトはランタイム用（サーバーサイドで使用する）。
ブラウザで使用する必要があればプレフィクスをつけてね

Next公式：https://nextjs.org/docs/pages/guides/environment-variables?utm_source=chatgpt.com

c.sakyou