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

このページは Cloud Translation API によって翻訳されました。

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 を変更します。

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

Firebase CLI で、ウェブフレームワークのプレビューを有効にします。
```
firebase experiments:enable webframeworks
```
CLI から初期化コマンドを実行し、プロンプトに沿って操作します。
```
firebase init hosting
```
「Do you want to use a web framework? (experimental)」に「yes」と回答します。
ホスティングソースディレクトリを選択します。既存の Next.js アプリの場合、CLI プロセスが完了し、次のセクションに進みます。
プロンプトが表示されたら、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);