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_PUBLIC_ とする

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

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