Firebase CLI を使用すると、Next.js ウェブアプリを Firebase にデプロイし、Firebase Hosting で提供できます。CLI では Next.js の設定が Firebase の設定に変換されます。ユーザー側で必要な追加の構成はほぼありません。アプリに動的なサーバーサイド ロジックが含まれている場合、CLI はロジックを Cloud Functions for Firebase にデプロイします。
始める前に
Firebase に Next.js アプリのデプロイを開始する前に、まず、次の要件とオプションを確認してください。
- Firebase CLI バージョン 11.14.2 以降。任意の方法で CLI をインストールしている。
- 省略可: Firebase プロジェクトで課金が有効になっている（SSR を使用する場合は必須）。
- 省略可: 試験運用版の ReactFire ライブラリを使用して Firebase の便利な機能を利用する。
Firebase を初期化する
まず、フレームワーク プロジェクトで Firebase を初期化します。
- Firebase CLI で、ウェブ フレームワークのプレビューを有効にします。
firebase experiments:enable webframeworks
- CLI から初期化コマンドを実行し、プロンプトに沿って操作します。
firebase init hosting
- ホスティング ソース ディレクトリを選択します。既存の Next.js アプリの場合、CLI プロセスが完了し、次のセクションに進みます。
- [Dynamic web hosting with web framework] を選択します。
- Next.js を選択します。
静的コンテンツを提供する
Firebase を初期化した後、標準のデプロイ コマンドで静的コンテンツを提供します。
firebase deploy
動的コンテンツを事前レンダリングする
Firebase CLI は、getStaticProps と getStaticPaths の使用を検出します。
省略可: Firebase JS SDK との統合
サーバーとクライアントの両方のバンドルに Firebase JS SDK メソッドを含める場合は、ランタイム エラーが発生しないように、プロダクトの使用前に isSupported() を確認してください。すべてのプロダクトがすべての環境でサポートされているわけではありません。
省略可: Firebase Admin SDK との統合
ブラウザビルドに Admin SDK バンドルを含めると失敗します。これらのバンドルは、getStaticProps と getStaticPaths 内でのみ参照してください。
完全な動的コンテンツを提供する（SSR）
Firebase CLI は、getServerSideProps の使用を検出します。
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);