Next.js + Firebaseでの開発でハマったところ #JavaScript

Next.js + Firebaseで開発する際にハマった箇所や注意点などを共有したいと思います。

本番環境とローカル環境でConfigを切り替えた場合の動作


if(process.env.NODE_ENV === "production") {
  firebase.initializeApp(/** 本番用の設定 */);
} else {
  firebase.initializeApp(/** ローカル用の設定 */);
}

この場合の注意点はローカルで実行するコマンドによっては本番用の設定で動いてしまう点です。
しかもNODE_ENV=development firebase serveみたいにNODE_ENVを設定しても"production"で動きます。

$ npm run serve // NODE_ENVは"production"
$ npm run dev // NODE_ENVは"development"

結論から言いますと以下のようなエラーが出て動きません。

ReferenceError: XMLHttpRequest is not defined

Storageの画像を参照する場合の内部に使われているXMLHttpRequestがサーバー側(Node)には存在しないためです。
client側でStorageの画像を参照するようにするのが無難？？？

手動でfirebase deployを使用してデプロイした場合は、既存のfunctionを上書きするか上書きせずにデプロイするかを選べます。

CIでfirebase deployで自動デプロイしようとすると上記の選択肢が出るためCIが終わりません。
ちゃんとfunction名を指定することで選択肢が出ず無事デプロイできました。

firebase deploy --only functions:<function名>

Nextでハマった際は日本語の情報がないため苦労しました。
誰かの助けになれば幸いです。