Next.js を統合する

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

始める前に

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);