Next.jsサイトをfirebase hostingにデプロイしたい

前提

Next.jsを用いて、Firebase Authでログイン管理し、Firestoreのデータを読み書きするサイトを作成したいと考えています。
商用であることと予算の関係で、firebase hostingの利用を希望しています。
Reactは初心者に毛が生えた程度、
Next.jsとFirebaseは今回初めて扱います。

ひとまずHowtoを公開されているサイトを見ながら、そのまま手順をなぞって

Firebase Authでログイン管理し、Firestoreのデータを読み書きするNext.jsサイトをlocalhostで動かす
専用テンプレートを用いてcreate-next-appして、Firebaseにデプロイする

それぞれを行うことはできました。

※1-1 https://zenn.dev/elletech/articles/nextjs_firestore_json
※1-2 https://maku.blog/p/m3bjrz7/
※2 https://qiita.com/takaken/items/8ed671486de804696079

実現したいこと

上記1のNext.jsの、Firebaseへのデプロイを実現したいです。
Firebase Hostingは静的ページでないと機能しないといった情報もあったので、
そもそもこれが可能なのかが知りたいです。

Cloud Functionsを用いれば可能なのかと思い、GCPのアカウントは作成しましたが
まだCloud Functions for Firebaseとの違いも分かっていないような状況で、
上記1と2を共存させる組み合わせ方がわかりませんでした。

試したこと

上記1のNext.jsに対して、firebase initを行ったり、
上記2のテンプレートをベースに1の参考サイトの内容を行おうとしましたが
知識が足らずエラーに対応できませんでした。

発生している問題・エラーメッセージ

直近では、firebase init時に

Error: functions predeploy error: Command terminated with non-zero exit code 1

と出たり、上記2のテンプレートを編集していく中で

モジュール 'firebase/app' またはそれに対応する型宣言が見つかりません。
'../utils/firebase/init' import is restricted from being used by a pattern.
名前空間 'FirebaseApp' を型として使用することはできません。

等、1手順毎に出るエラーに
検索で出てきた「(.d.ts) ファイルを追加」をしてみるなど付け焼き刃で進めましたが
理解しきれませんでした。

補足情報（FW/ツールのバージョンなど）

Mac, VSCodeを使用しています。
Node v16.16.0

実現の可否、参考資料のご紹介など
なんでも結構ですので、ヒントをいただけるとありがたいです。
恐れ入りますがよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Firebase Hostingのみでホスティングを行う場合は、仰る通り静的ページのみでしか公開できないため
NextのSSRではなくSSGオンリーでの運用でしたら可能です。それがおすすめです。

SSRをどうしても使用したい場合、Firebase HostingでCloudFunctionのAPIにrewriteしてSSR的な動きをすることもできます。
しかし実際やってみるとわかるのですが、結構ややこしいのとコールドスタート問題（アクセスが無いとCloudFunctionが止まるので、止まっている状態でアクセスされた時の初回起動が遅い）
があるので、あまりお勧めはしません。

と、以前までなら上記のような感じだったのですが、2022年5月に正式にFirebase HostingでNextを対応したとのことなので
https://github.com/FirebaseExtended/firebase-framework-tools
こちらを試してみてもいいかもしれません。（こちらは私も試したことはありません…）

投稿2022/10/03 02:40