Next.js を統合する

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 を初期化します。

  1. Firebase CLI で、ウェブ フレームワークのプレビューを有効にします。
    firebase experiments:enable webframeworks
  2. CLI から初期化コマンドを実行し、プロンプトに沿って操作します。
    firebase init hosting
  3. ホスティング ソース ディレクトリを選択します。既存の Next.js アプリの場合、CLI プロセスが完了し、次のセクションに進みます。
  4. [Dynamic web hosting with web framework] を選択します。
  5. Next.js を選択します。

静的コンテンツを提供する

Firebase を初期化した後、標準のデプロイ コマンドで静的コンテンツを提供します。

firebase deploy

デプロイされたアプリは公開サイトで確認できます

動的コンテンツを事前レンダリングする

Firebase CLI は、getStaticPropsgetStaticPaths の使用を検出します。

省略可: Firebase JS SDK との統合

サーバーとクライアントの両方のバンドルに Firebase JS SDK メソッドを含める場合は、ランタイム エラーが発生しないように、プロダクトの使用前に isSupported() を確認してください。すべてのプロダクトがすべての環境でサポートされているわけではありません。

省略可: Firebase Admin SDK との統合

ブラウザビルドに Admin SDK バンドルを含めると失敗します。これらのバンドルは、getStaticPropsgetStaticPaths 内でのみ参照してください。

完全な動的コンテンツを提供する(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);