Next.js を統合する

Firebase CLI を使用すると、Next.js Web アプリを Firebase にデプロイし、Firebase Hosting で提供できます。CLI では Next.js の設定がそのまま Firebase の設定に変換されるため、ユーザー側でその他の構成が必要になることはほぼありません。アプリに動的なサーバーサイド ロジックが含まれている場合、CLI はこのロジックを Cloud Functions for Firebase にデプロイします。

始める前に

Firebase にアプリのデプロイを開始する前に、次の要件とオプションを確認してください。

  • Firebase CLI バージョン 12.1.0 以降。任意の方法で CLI をインストールしている。

  • 省略可: Firebase プロジェクトで課金が有効になっている（SSR を使用する場合は必須）。

  • 省略可: 試験運用版の ReactFire ライブラリを使用して Firebase の便利な機能を利用する。

Firebase を初期化する

まず、フレームワーク プロジェクトで Firebase を初期化します。新しいプロジェクトの場合は Firebase CLI を使用します。既存のプロジェクトの場合は firebase.json を変更します。

新しいプロジェクトを初期化する

  1. Firebase CLI で、ウェブ フレームワークのプレビューを有効にします。
    firebase experiments:enable webframeworks

  2. CLI から初期化コマンドを実行し、プロンプトに沿って操作します。

    firebase init hosting

  3. 「Do you want to use a web framework? (experimental)」に「yes」と回答します。

  4. ホスティング ソース ディレクトリを選択します。既存の Next.js アプリの場合、CLI プロセスが完了し、次のセクションに進みます。

  5. プロンプトが表示されたら、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 の使用を検出します。 このような場合、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);