Next.js + Firebaseで開発する際にハマった箇所や注意点などを共有したいと思います。
目次:
本番環境とローカル環境でConfigを切り替えた場合の動作
getInitialProps内でのStorageの画像を参照する場合の動作
Next.jsをHostingとCloudfunctionでデプロイし、別のプロジェクトをCloudfunctionにデプロイした場合
本番環境とローカル環境で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"
getInitialProps内でのStorageの画像を参照する場合の動作
結論から言いますと以下のようなエラーが出て動きません。
ReferenceError: XMLHttpRequest is not defined
Storageの画像を参照する場合の内部に使われているXMLHttpRequestがサーバー側(Node)には存在しないためです。
client側でStorageの画像を参照するようにするのが無難？？？
CIでNext.jsと他のプロジェクトなどをCloudfunctionsにデプロイする場合
手動でfirebase deployを使用してデプロイした場合は、既存のfunctionを上書きするか上書きせずにデプロイするかを選べます。
CIでfirebase deployで自動デプロイしようとすると上記の選択肢が出るためCIが終わりません。
ちゃんとfunction名を指定することで選択肢が出ず無事デプロイできました。
firebase deploy --only functions:<function名>
最後に
Nextでハマった際は日本語の情報がないため苦労しました。
誰かの助けになれば幸いです。