サーバーでレンダリングされる Angular または Next.js アプリを構築する場合は、最新のウェブフレームワーク向けのフルスタックソリューションである次世代の Firebase App Hosting をご確認ください。

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

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