使用環境

・MacOS BigSur（11.5.2）
・VScode（1.59.1）
・Node.js (16.1.1）
・React（17.0.2）
・Next.js（11.1.0）
・Firebase(9.1.2)

はじめに

まず前提の共有ですが、Next.jsでFirebaseのサービス（Auth, Firestore, Storage等）を利用してプロジェクトを作成していました。

さらにNext.jsの諸々の恩恵を得るためにVercelにデプロイにすることにしました。

そして、FirebaseのAPIキーなど諸々の設定を行っていざデプロイという時に下記のビルドエラーが起きました。

Error [FirebaseError]: Firebase: Error (auth/invalid-api-key).
…以下略

調べてもこの環境とエラーに直接該当する情報がなかったため、記事を書くことにしました。

マイナーなエラーかもしれませんが誰かの役に立つことを願っています。

結論/解決策

さて、まずは結論からです。

**”コードベースのみでなくVercel側での環境変数の設定が必要”**でした。

詳しく説明しますと、

まずVercelの自分のプロジェクト>Settings> Environment Variables に飛びます。

そこで、Add Newの入力欄でNAMEとVALUEに設定したい環境変数を入力しAddします。
以下はこの記事の本題であるAPI KEYを設定する例です。

これができたら、そのページの下部に設定した環境変数が追加されています。

確認できたら再度デプロイをしてください。

ちなみに、おそらくFirebaseをNext.jsに接続するやり方を学習している方は.env.localファイルを作成して以下のようにNEXT_PUBLIC_で設定しているかと思います。（ここができてないと同じくエラーになります）

//firebase.ts(js)

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STOTAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

export const app = initializeApp(firebaseConfig);

参考:

最後に

まとめると、

API KEYに間違えはないか？ console.log(firebaseConfig.apiKey)でコンソールに出力されることを確認する
firebaseConfigや.env.localの設定に間違えはないか？綴りミスなどに気をつける
上記の通りVercel側で環境変数の設定をしているか？

この点をチェックすると良いかと思います。

何か本記事において疑問点や誤りなどありましたらお気軽にコメントください。