Help us understand the problem. What is going on with this article?

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

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でハマった際は日本語の情報がないため苦労しました。
誰かの助けになれば幸いです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした