Next.jsでローカルで環境変数を使うときは変数名にNEXT_PUBLIC_をつける

.envに認証情報とか書いてNext.jsのtsxファイルから読み出して使おうとしたときにどうしてもうまくいかなくて、next.js 環境変数 読み出せないとかでググって見つけた情報。

WORDPRESS_API_URL=https://xxxx.com/graphql
WORDPRESS_POST_URL=https://https://xxxx..com/wp-json/wp/v2/posts
WORDPRESS_USER="kngsmym"
WORDPRESS_APL_PWD="XXXX XXXX XXXX XXXX"

と.env.localに書いて

const WP_POST_URL = process.env.NEXT_PUBLIC_WORDPRESS_POST_URL;
const result = await fetch(
    WP_POST_URL,
    requestOptions
  )

とかって使おうとしたらどうしてもundefinedになってしまって、ググってみたら上記の事が書いてあり、以下に書き直した。

WORDPRESS_API_URL=https://xxxx.com/graphql
NEXT_PUBLIC_WORDPRESS_POST_URL=https://https://xxxx..com/wp-json/wp/v2/posts
NEXT_PUBLIC_WORDPRESS_USER="kngsmym"
NEXT_PUBLIC_WORDPRESS_APL_PWD="XXXX XXXX XXXX XXXX"

あっさりOKでした。

WORDPRESS_API_URLについてはWP＋Next.jsで構築する際に参考にしたページが使用していたテンプレにおそらく書いてあって、これはこれで普通に動いてたのでよくわからない。

以下のページによれば

Next.js における環境変数 (env) の基本的な設定方法 | fwywd（フュード）powered by キカガク

Next.js における環境変数 (env) の基本的な設定方法をまとめまています。env ファイルの基本的な使い方の参考になれば幸いです！

fwywd.com

ブラウザで環境変数を使用したい場合は、先頭の文字を NEXT_PUBLIC_ とする

とのことなので、ブラウザで読み込んで使うときはNGで、サーバからサーバにリクエストするならOKとかそういう感じなんだろうか。

手探りでやってるとよくわからないことばかりで、なにをどこまで調べたら完全な知識になるのかわからなくて怖い。

【追記】

上記、やっててやっと理解したのですが、サーバ側で扱う値については通常の表記でよく、ブラウザ側で扱う値についてはNEXT_PUBLIC_が必要ということで、要はクライアント側でjsからユーザーが読み取れるのでそれを意識的に区別するためにそうなってるという解釈でよさそう。

要はNEXT_PUBLIC_つけないと読み込めないような使い方してる環境変数はブラウザからも読み取られてますよ、パスとかjs内に公開されちゃってるってことですよ、ってことですよね。

僕のようにサーバ側でその処理を終えているのかどうか、なんてことがひとつひとつの処理について細かく把握できずにやってる人間にはそれ助かるな、とあとで思い至りました。