Firebase CLI を使用すると、Next.js Web アプリを Firebase にデプロイし、Firebase Hosting で提供できます。
静的コンテンツを提供する
Firebase を初期化した後、標準のデプロイ コマンドで静的コンテンツを提供します。
firebase deploy
アプリに動的なサーバーサイド ロジックが含まれている場合、CLI はこのロジックを Cloud Functions for Firebase にデプロイします。デプロイされたアプリは公開サイトで確認できます。
動的コンテンツを事前レンダリングする
Firebase CLI は、getStaticProps と getStaticPaths の使用を検出します。
省略可: Firebase JS SDK との統合
サーバーとクライアントの両方のバンドルに Firebase JS SDK メソッドを含める場合は、ランタイム エラーが発生しないように、プロダクトの使用前に isSupported() を確認してください。すべてのプロダクトがすべての環境でサポートされているわけではありません。
省略可: Firebase Admin SDK との統合
ブラウザビルドに Admin SDK バンドルを含めると失敗します。これらのバンドルは、getStaticProps と getStaticPaths 内でのみ参照してください。
完全な動的コンテンツを提供する（SSR）
Firebase CLI は、getServerSideProps の使用を検出します。 このような場合、CLI は Cloud Functions for Firebase に関数をデプロイして、動的なサーバーコードを実行します。ドメインやランタイムの構成など、これらの関数に関する情報は Firebase コンソールで確認できます。
next.config.js を使用して Hosting の動作を構成する
画像最適化
Next.js の画像最適化がサポートされていますが、SSR を使用していない場合でも、（Cloud Functions for Firebase で）関数の作成がトリガーされます。
リダイレクト、書き換え、ヘッダー
Firebase CLI は、next.config.js 内の
リダイレクト、
書き換え、
ヘッダーを使用し、
デプロイ時に同等の Firebase Hosting 構成に変換します。Next.js のリダイレクト、書き換え、ヘッダーを同等の Firebase Hosting ヘッダーに変換できない場合は、イメージの最適化や SSR を使用していない場合でも、フォールバックして関数がビルドされます。
省略可: Firebase Authentication との統合
ウェブ フレームワーク対応の Firebase デプロイツールは、Cookie を使用してクライアントとサーバーの状態を自動的に同期します。SSR で認証コンテキストにアクセスする方法はいくつかあります。
- Express の
res.localsオブジェクトには認証済みの Firebase アプリ インスタンス（firebaseApp）と現在ログインしているユーザー（currentUser）が含まれている場合があります。これは、getServerSidePropsでアクセスできます。 - 認証された Firebase アプリ名は、ルートクエリ（
__firebaseAppName）で提供されます。これにより、状況に応じて手動で統合できます。
// get the authenticated Firebase App
const firebaseApp = getApp(useRouter().query.__firebaseAppName);