Next.js でクライアントから環境変数が読み込めない

Next.js で今個人的に作っているアプリケーションにおいて、クライアント（ブラウザ）から環境変数（.env.*）が読めないという事象に遭遇したので、その原因と解決法をメモしておきます。

やりたいことは、ページコンポーネント上で、アクセス時に毎回 Firebase の匿名認証を実行するというもの。

useEffect(() => {
    // 匿名ログイン実行
    async function initFirebase() {
      firebase.auth().onAuthStateChanged(async (user) => {
        if (!user) {
          await firebase.auth().signInAnonymously()
        } else {
          console.log(user)
        }
      })
    }

    initFirebase()
  }, [])

この実行時に "auth/invalid-api-key" というエラーが出てしまいました。

ずばり原因としては、.env ファイルで設定した環境変数に問題があり、Firebase の 設定用ファイルにおいて、それを正しく読み込めていませんでした。

本来、Next.js でブラウザから環境変数を呼ぶ際は、以下のように 'NEXT_PUBLIC_****' と命名しなければいけないのですが、

NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY=xxxxxxx
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=xxxxxxx
NEXT_PUBLIC_FIREBASE_PROJECT_ID=xxxxxxx
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=xxxxxxx
NEXT_PUBLIC_FIREBASE_APP_ID=xxxxxxx

以下のようにしてしまっておりました。

FIREBASE_PUBLIC_API_KEY=xxxxxxx
FIREBASE_AUTH_DOMAIN=xxxxxxx
FIREBASE_PROJECT_ID=xxxxxxx
FIREBASE_MESSAGING_SENDER_ID=xxxxxxx
FIREBASE_APP_ID=xxxxxxx

上記のように環境変数名を変更すると、無事読み込むことができました。めでたしめでたし。