1. 始める前に
この Codelab では、レストラン レビューのウェブサイトである Friendly Eats という Next.js ウェブアプリに Firebase を統合する方法を学びます。
完成したウェブアプリは便利な機能を備えており、Firebase が Next.js アプリの構築にどのように役立つかを実証しています。主な機能は次のとおりです。
- Google でログインとログアウト機能: 完成したウェブアプリでは、Google でログインし、ログアウトできます。ユーザーのログインと永続性は、完全に Firebase Authentication で管理されます。
- 画像: 完成したウェブアプリでは、ログインしたユーザーがレストランの画像をアップロードできます。画像アセットは Cloud Storage for Firebase に保存されます。Firebase JavaScript SDK には、アップロードされた画像への公開 URL が用意されています。この公開 URL は、Cloud Firestore の関連するレストランのドキュメントに保存されます。
- レビュー: 完成したウェブアプリでは、ログイン済みのユーザーが、星による評価とテキストベースのメッセージで構成されるレストランのレビューを投稿できます。レビュー情報は Cloud Firestore に保存されます。
- フィルタ: 完成したウェブアプリでは、ログイン ユーザーがカテゴリ、場所、価格に基づいてレストランのリストをフィルタできます。使用する並べ替え方法をカスタマイズすることもできます。データには Cloud Firestore からアクセスされ、使用されたフィルタに基づいて Firestore のクエリが適用されます。
前提条件
- Next.js と JavaScript に関する知識
学習内容
- Firebase で Next.js アプリルーターおよびサーバーサイド レンダリングを使用する方法
- Cloud Storage for Firebase で画像を保持する方法。
- Cloud Firestore データベースでデータの読み取りと書き込みを行う方法。
- Firebase JavaScript SDK で「Google でログイン」を使用する方法。
必要なもの
- Git
- Java 開発キット
- Node.js の最新の安定版
- 任意のブラウザ（Google Chrome など）
- コードエディタとターミナルがある開発環境
- Firebase プロジェクトを作成、管理するための Google アカウント
- Firebase プロジェクトを Blaze 料金プランにアップグレードできる
2. 開発環境を設定する
この Codelab では、アプリのスターター コードベースを提供し、Firebase CLI を使用します。
リポジトリをダウンロードする
- ターミナルで、Codelab の GitHub リポジトリのクローンを作成します。
git clone https://github.com/firebase/friendlyeats-web.git
- GitHub リポジトリには複数のプラットフォーム用のサンプル プロジェクトが含まれています。ただし、この Codelab では
nextjs-startディレクトリのみを使用します。次のディレクトリをメモします。nextjs-start: ビルドのベースとなるスターター コードが含まれます。nextjs-end: 完成したウェブアプリの解答コードが含まれます。
- ターミナルで
nextjs-startディレクトリに移動し、必要な依存関係をインストールします。cd friendlyeats-web/nextjs-start npm install
Firebase CLI をインストールまたは更新する
次のコマンドを実行して、Firebase CLI がインストールされ、v12.5.4 以降であることを確認します。
firebase --version
- Firebase CLI がインストールされているが、v12.5.4 以降でない場合は、次の手順で更新します。
npm update -g firebase-tools
- Firebase CLI がインストールされていない場合は、
npm install -g firebase-tools
インストールします。
権限エラーが原因で Firebase CLI をインストールできない場合は、npm のドキュメントを参照するか、別のインストール オプションを使用してください。
Firebase にログインする
- 次のコマンドを実行して、Firebase CLI にログインします。
firebase login
- Firebase でデータを収集するかどうかに応じて、「
Y」または「N」と入力します。 - ブラウザで Google アカウントを選択し、[許可] をクリックします。
3. Firebase プロジェクトを設定する
このセクションでは、Firebase プロジェクトをセットアップして、Firebase ウェブアプリをプロジェクトに関連付けます。また、サンプル ウェブアプリで使用される Firebase サービスも設定します。
Firebase プロジェクトを作成する
- Firebase コンソールで [プロジェクトを作成] をクリックします。
- [プロジェクト名を入力してください] テキスト ボックスに「
FriendlyEats Codelab」（または任意のプロジェクト名）を入力し、[続行] をクリックします。 - この Codelab では Google アナリティクスは必要ないため、[このプロジェクトで Google アナリティクスを有効にする] オプションをオフにします。
- [プロジェクトの作成] をクリックします。
- プロジェクトがプロビジョニングされるまで待ってから、[続行] をクリックします。
- Firebase プロジェクトで、[プロジェクトの設定] に移動します。後で必要になるため、プロジェクト ID をメモしておきます。この一意の識別子によってプロジェクトが識別されます（Firebase CLI などで）。
Firebase プロジェクトにウェブアプリを追加する
- Firebase プロジェクトの [プロジェクトの概要] に移動し、
[ウェブ] をクリックします。 - [アプリのニックネーム] テキスト ボックスに、覚えやすいアプリのニックネーム（
My Next.js appなど）を入力します。 - [このアプリ用の Firebase Hosting も設定します] チェックボックスをオンにします。
- [アプリの登録] > [次へ] > [次へ] > [コンソールに進む] をクリックします。
Firebase のお支払いプランをアップグレードする
ウェブ フレームワークを使用するには、Firebase プロジェクトが Blaze 料金プランを利用している（Cloud 請求先アカウントに関連付けられている）必要があります。
- Cloud 請求先アカウントには、クレジット カードなどのお支払い方法が必要です。
- Firebase と Google Cloud を初めて使用する場合は、$300 分のクレジットと無料トライアルの Cloud 請求先アカウントの対象かどうかを確認してください。
ただし、この Codelab を完了しても、実際の料金は発生しません。
プロジェクトを Blaze プランにアップグレードする手順は次のとおりです。
- Firebase コンソールで、プランのアップグレードを選択します。
- ダイアログで Blaze プランを選択し、画面の指示に従ってプロジェクトを Cloud 請求先アカウントに関連付けます。
Cloud 請求先アカウントを作成する必要がある場合は、アップグレードに戻ります。フローに沿って、アップグレードを完了します。
Firebase コンソールで Firebase サービスを設定する
Authentication を設定する
- Firebase コンソールで [認証] に移動します。
- [Get started] をクリックします。
- [その他のプロバイダ] 列で、[Google] > [有効にする] をクリックします。
- [プロジェクトの公開名] テキスト ボックスに、
My Next.js appなどの覚えやすい名前を入力します。 - [プロジェクトのサポートメール] プルダウンから、メールアドレスを選択します。
- [保存] をクリックします。
Cloud Firestore を設定する
- Firebase コンソールで、Firestore に移動します。
- [データベースを作成] > [テストモードで開始] > [次へ] をクリックします。
この Codelab の後半で、データを保護するためのセキュリティ ルールを追加します。データベースにセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。 - デフォルトの場所を使用するか、任意の場所を選択します。
実際のアプリでは、ユーザーに近い場所を選択します。このロケーションは後で変更できません。これは自動的にデフォルトの Cloud Storage バケットのロケーションになります（次のステップ）。 - [Done] をクリックします。
Cloud Storage for Firebase を設定する
- Firebase コンソールで [ストレージ] に移動します。
- [開始] > [テストモードで開始] > [次へ] をクリックします。
この Codelab の後半で、データを保護するためのセキュリティ ルールを追加します。Storage バケットのセキュリティ ルールを追加せずに、アプリを配布または公開しないでください。 - バケットのロケーションはすでに選択されているはずです（前のステップで Firestore を設定したため）。
- [Done] をクリックします。
4. スターター コードベースを確認する
このセクションでは、この Codelab で機能を追加する、アプリのスターター コードベースのいくつかの領域を確認します。
フォルダとファイルの構造
次の表に、アプリのフォルダとファイルの構造の概要を示します。
フォルダとファイル | 説明 |
| React のフィルタ、ヘッダー、レストランの詳細、レビューのコンポーネント |
| React や Next.js に必ずしもバインドされていないユーティリティ関数 |
| Firebase 固有のコードと Firebase の構成 |
| ウェブアプリの静的アセット（アイコンなど） |
| Next.js App Router を使用したルーティング |
| API ルートハンドラ |
| npm によるプロジェクトの依存関係 |
| Next.js 固有の構成（サーバー アクションが有効） |
| JavaScript 言語サービスの設定 |
サーバー コンポーネントとクライアント コンポーネント
アプリが、App Router を使用する Next.js ウェブアプリである。サーバー レンダリングはアプリ全体で使用されます。たとえば、src/app/page.js ファイルはメインページを管理するサーバー コンポーネントです。src/components/RestaurantListings.jsx ファイルは、ファイルの先頭にある "use client" ディレクティブで示されるクライアント コンポーネントです。
インポート ステートメント
次のようなインポート ステートメントがあります。
import RatingPicker from "@/src/components/RatingPicker.jsx";
アプリは @ 記号を使用して相対インポート パスの煩雑さを回避します。これはパス エイリアスによって可能になります。
Firebase 固有の API
すべての Firebase API コードは src/lib/firebase ディレクトリにラップされています。個々の React コンポーネントは、Firebase 関数を直接インポートするのではなく、ラップされた関数を src/lib/firebase ディレクトリからインポートします。
モックデータ
レストランの模擬データとレビューデータは src/lib/randomData.js ファイルに含まれています。このファイルのデータは、src/lib/fakeRestaurants.js ファイル内のコードにまとめられます。
5. Firebase Hosting エミュレータを使用してローカル ホスティングを設定する
このセクションでは、Firebase Hosting エミュレータを使用して Next.js ウェブアプリをローカルで実行します。
このセクションが終わる頃には、Firebase Hosting エミュレータが Next.js アプリを実行するため、エミュレータとは別のプロセスで Next.js を実行する必要はありません。
Firebase サービス アカウントをダウンロードして使用する
この Codelab で作成するウェブアプリでは、Next.js によるサーバー側レンダリングを使用します。
Node.js 用の Firebase Admin SDK は、サーバー側のコードからセキュリティ ルールが機能するようにするために使用されます。Firebase Admin で API を使用するには、Firebase コンソールから Firebase サービス アカウントをダウンロードして使用する必要があります。
- Firebase コンソールで、[プロジェクトの設定] の [サービス アカウント] ページに移動します。
- [新しい秘密鍵を生成] > [鍵を生成] をクリックします。
- ファイルがファイルシステムにダウンロードされたら、そのファイルのフルパスを取得します。
たとえば、ファイルを Downloads ディレクトリにダウンロードした場合、フルパスは次のようになります。/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json - ターミナルで、
GOOGLE_APPLICATION_CREDENTIALS環境変数をダウンロードした秘密鍵のパスに設定します。Unix 環境の場合、コマンドは次のようになります。export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
- 新しいターミナル セッションを開始すると環境変数が失われる可能性があるため、このターミナルは開いたままにして、この Codelab の残りの部分で使用します。
新しいターミナル セッションを開く場合は、前のコマンドを再実行する必要があります。
Firebase 構成をウェブアプリのコードに追加する
- Firebase コンソールで プロジェクトの設定に移動します。
- [SDK setup and configuration] ペインで、
firebaseConfig変数を見つけて、そのプロパティとその値をコピーします。 - コードエディタで
.envファイルを開き、環境変数の値に Firebase コンソールの構成値を入力します。 - ファイルで、既存のプロパティをコピーしたプロパティに置き換えます。
- ファイルを保存します。
Firebase プロジェクトでウェブアプリを初期化する
ウェブアプリを Firebase プロジェクトに接続する手順は次のとおりです。
- ターミナルで、Firebase でウェブ フレームワークが有効になっていることを確認します。
firebase experiments:enable webframeworks
- Firebase を初期化します。
firebase init
- 次のオプションを選択します。
- Firestore: Firestore のセキュリティ ルールとインデックス ファイルの構成
- Hosting: Firebase Hosting のファイルを構成し、必要に応じて GitHub Action のデプロイを設定する
- Storage: Cloud Storage のセキュリティ ルール ファイルを構成する
- エミュレータ: Firebase プロダクト用のローカル エミュレータを設定する
- [Use an existing project] を選択し、以前にメモしたプロジェクト ID を入力します。
- 「どのリージョンでサーバーサイド コンテンツ（該当する場合）をホストしますか？」という質問が表示されるまで、後続のすべての質問でデフォルト値を選択します。ターミナルに、現在のディレクトリに既存の Next.js コードベースが検出されたことを伝えるメッセージが表示されます。
- 「どのリージョンでサーバーサイド コンテンツをホストしますか？（該当する場合）」という質問で、Firestore と Cloud Storage 用に以前に選択したロケーションを選択します。
- 「どの Firebase エミュレータを設定しますか？」という質問が表示されるまで、後続のすべての質問でデフォルト値を選択します。この質問では、[Functions エミュレータ] と [Hosting エミュレータ] を選択します。
- その他の質問はすべてデフォルト値を選択してください。
セキュリティ ルールのデプロイ
このコードには、Firestore と Cloud Storage for Firebase のセキュリティ ルールのセットがすでに含まれています。セキュリティ ルールをデプロイすると、データベースとバケットのデータの不正使用に対する保護が強化されます。
- これらのセキュリティ ルールをデプロイするには、ターミナルで次のコマンドを実行します。
firebase deploy --only firestore:rules,storage
- 「
"Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"」というメッセージが表示されたら、[はい] を選択します。
Hosting エミュレータを起動する
- ターミナルで Hosting エミュレータを起動します。
firebase emulators:start --only hosting
ターミナルは、Hosting エミュレータがあるポート（http://localhost:5000/ など）を返します。
- ブラウザで、Firebase Hosting エミュレータを使用して URL に移動します。
- ウェブページで
"Error: Firebase session cookie has incorrect..."のようなエラーが見つかった場合は、localhost 環境ですべての Cookie を削除する必要があります。手順については、Cookie を削除する | DevTools のドキュメントをご覧ください。
これで、最初のウェブアプリが表示されます。 localhost の URL でウェブアプリを表示している場合でも、コンソールで構成した実際の Firebase サービスが使用されます。
6. ウェブアプリに認証を追加する
このセクションでは、ウェブアプリにログインできるように認証を追加します。
ログイン機能とログアウト機能を実装する
src/lib/firebase/auth.jsファイルで、onAuthStateChanged、signInWithGoogle、signOutの各関数を次のコードに置き換えます。
export function onAuthStateChanged(cb) {
return _onAuthStateChanged(auth, cb);
}
export async function signInWithGoogle() {
const provider = new GoogleAuthProvider();
try {
await signInWithPopup(auth, provider);
} catch (error) {
console.error("Error signing in with Google", error);
}
}
export async function signOut() {
try {
return auth.signOut();
} catch (error) {
console.error("Error signing out with Google", error);
}
}
このコードでは、次の Firebase API を使用します。
Firebase API | 説明 |
Google 認証プロバイダのインスタンスを作成します。 | |
ダイアログベースの認証フローを開始します。 | |
ユーザーをログアウトします。 |
src/components/Header.jsx ファイルでは、コードはすでに signInWithGoogle 関数と signOut 関数を呼び出しています。
- ウェブアプリでページを更新し、[Sign in with Google] をクリックします。ウェブアプリは更新されないため、ログインが成功したかどうかは不明です。
認証の変更通知を受け取る
認証の変更に登録する手順は次のとおりです。
src/components/Header.jsxファイルに移動する- 関数全体を次の
useUserSessionに置き換えます。
function useUserSession(initialUser) {
// The initialUser comes from the server through a server component
const [user, setUser] = useState(initialUser);
const router = useRouter();
useEffect(() => {
const unsubscribe = onAuthStateChanged(authUser => {
setUser(authUser);
});
return () => {
unsubscribe();
};
}, []);
useEffect(() => {
onAuthStateChanged(authUser => {
if (user === undefined) return;
if (user?.email !== authUser?.email) {
router.refresh();
}
});
}, [user]);
return user;
}
このコードは、onAuthStateChanged 関数が認証状態の変更を指定したときに、React の state フックを使用してユーザーを更新します。
変更を確認する
src/app/layout.js ファイルのルート レイアウトは、ヘッダーをレンダリングし、可能な場合はユーザーをプロパティとして渡します。
<Header initialUser={currentUser?.toJSON()} />
つまり、<Header> コンポーネントは、データがある場合、サーバーの実行中にユーザーデータを表示します。最初のページ読み込み後のページのライフサイクルで認証の更新がある場合は、onAuthStateChanged ハンドラがそれらを処理します。
次に、ウェブアプリをテストして、ビルドの内容を確認します。
新しい認証動作を確認する手順は次のとおりです。
- ブラウザでウェブアプリを更新します。表示名がヘッダーに表示されます。
- ログアウトしてもう一度ログインしてください。 ページはリアルタイムで更新されます。ページを更新することはありません。別のユーザーにこの手順を繰り返すことができます。
- 省略可: ウェブアプリを右クリックして [ページのソースを表示] を選択し、表示名を検索します。サーバーから返される生の HTML ソースに含まれます。
7. レストラン情報を表示する
このウェブアプリには、レストランやレビューのモックデータが含まれています。
レストランを 1 つ以上追加してください
レストランの疑似データをローカルの Cloud Firestore データベースに挿入する手順は次のとおりです。
- ウェブアプリで、
> [サンプル レストランを追加] を選択します。 - Firebase コンソールの [Firestore Database] ページで、[レストラン] を選択します。レストラン コレクションには、それぞれ 1 つのレストランを表す最上位のドキュメントがあります。
- 数件のドキュメントをクリックして、レストランのドキュメントのプロパティを調べます。
レストランのリストを表示する
これで、Cloud Firestore データベースに Next.js ウェブアプリで表示できるレストランが追加されました。
データ取得コードを定義する手順は次のとおりです。
src/app/page.jsファイルで<Home />サーバー コンポーネントを探し、getRestaurants関数の呼び出しを確認します。この関数は、サーバーの実行時にレストランのリストを取得します。getRestaurants関数は次の手順で実装します。src/lib/firebase/firestore.jsファイルで、applyQueryFilters関数とgetRestaurants関数を次のコードに置き換えます。
function applyQueryFilters(q, { category, city, price, sort }) {
if (category) {
q = query(q, where("category", "==", category));
}
if (city) {
q = query(q, where("city", "==", city));
}
if (price) {
q = query(q, where("price", "==", price.length));
}
if (sort === "Rating" || !sort) {
q = query(q, orderBy("avgRating", "desc"));
} else if (sort === "Review") {
q = query(q, orderBy("numRatings", "desc"));
}
return q;
}
export async function getRestaurants(filters = {}) {
let q = query(collection(db, "restaurants"));
q = applyQueryFilters(q, filters);
const results = await getDocs(q);
return results.docs.map(doc => {
return {
id: doc.id,
...doc.data(),
// Only plain objects can be passed to Client Components from Server Components
timestamp: doc.data().timestamp.toDate(),
};
});
}
- ウェブアプリを更新します。レストランの画像は、ページにタイルとして表示されます。
レストランのリスティングがサーバー実行時に読み込まれることを確認する
Next.js フレームワークを使用する場合、データが読み込まれるタイミングがサーバー側とクライアント側のどちらであるかがはっきりしない場合があります。
レストランのリスティングがサーバーの実行時に読み込まれることを確認する手順は次のとおりです。
- ウェブアプリで DevTools を開き、JavaScript を無効にします。
- ウェブアプリを更新します。レストランのリスティングは引き続き読み込まれます。サーバー レスポンスでレストラン情報が返されます。JavaScript を有効にすると、クライアントサイドの JavaScript コードによってレストラン情報がハイドレートされます。
- DevTools で、JavaScript を再度有効にします。
Cloud Firestore スナップショット リスナーを使用してレストランの更新をリッスンする
前のセクションでは、レストランの初期セットを src/app/page.js ファイルから読み込む方法を確認しました。src/app/page.js ファイルはサーバー コンポーネントであり、Firebase データ取得コードを含むサーバー上でレンダリングされます。
src/components/RestaurantListings.jsx ファイルはクライアント コンポーネントであり、サーバーでレンダリングされたマークアップをハイドレートするように構成できます。
サーバーでレンダリングされたマークアップをハイドレートするように src/components/RestaurantListings.jsx ファイルを設定するには、次の手順を行います。
src/components/RestaurantListings.jsxファイルで、すでに作成されている次のコードを確認します。
useEffect(() => {
const unsubscribe = getRestaurantsSnapshot(data => {
setRestaurants(data);
}, filters);
return () => {
unsubscribe();
};
}, [filters]);
このコードは getRestaurantsSnapshot() 関数を呼び出します。これは、前のステップで実装した getRestaurants() 関数に似ています。ただし、このスナップショット関数はコールバック メカニズムを提供するため、レストランのコレクションが変更されるたびにコールバックが呼び出されます。
src/lib/firebase/firestore.jsファイルで、getRestaurantsSnapshot()関数を次のコードに置き換えます。
export function getRestaurantsSnapshot(cb, filters = {}) {
if (typeof cb !== "function") {
console.log("Error: The callback parameter is not a function");
return;
}
let q = query(collection(db, "restaurants"));
q = applyQueryFilters(q, filters);
const unsubscribe = onSnapshot(q, querySnapshot => {
const results = querySnapshot.docs.map(doc => {
return {
id: doc.id,
...doc.data(),
// Only plain objects can be passed to Client Components from Server Components
timestamp: doc.data().timestamp.toDate(),
};
});
cb(results);
});
return unsubscribe;
}
[Firestore Database] ページで行った変更がウェブアプリにリアルタイムで反映されるようになりました。
- ウェブアプリで、
> [サンプル レストランを追加] を選択します。スナップショット機能が正しく実装されていれば、ページを更新しなくてもレストランがリアルタイムで表示されます。
8. ウェブアプリからユーザーデータを保存する
src/lib/firebase/firestore.jsファイルで、updateWithRating()関数を次のコードに置き換えます。
const updateWithRating = async (
transaction,
docRef,
newRatingDocument,
review
) => {
const restaurant = await transaction.get(docRef);
const data = restaurant.data();
const newNumRatings = data?.numRatings ? data.numRatings + 1 : 1;
const newSumRating = (data?.sumRating || 0) + Number(review.rating);
const newAverage = newSumRating / newNumRatings;
transaction.update(docRef, {
numRatings: newNumRatings,
sumRating: newSumRating,
avgRating: newAverage,
});
transaction.set(newRatingDocument, {
...review,
timestamp: Timestamp.fromDate(new Date()),
});
};
このコードにより、新しいレビューを表す新しい Firestore ドキュメントが挿入されます。また、このコードにより、レストランを表す既存の Firestore ドキュメントを更新し、評価数と計算された平均評価の数値を更新しています。
- 関数全体を次の
addReviewToRestaurant()に置き換えます。
export async function addReviewToRestaurant(db, restaurantId, review) {
if (!restaurantId) {
throw new Error("No restaurant ID was provided.");
}
if (!review) {
throw new Error("A valid review has not been provided.");
}
try {
const docRef = doc(collection(db, "restaurants"), restaurantId);
const newRatingDocument = doc(
collection(db, `restaurants/${restaurantId}/ratings`)
);
await runTransaction(db, transaction =>
updateWithRating(transaction, docRef, newRatingDocument, review)
);
} catch (error) {
console.error(
"There was an error adding the rating to the restaurant.",
error
);
throw error;
}
}
Next.js サーバー アクションを実装する
Next.js サーバー アクションは、フォームデータにアクセスするための便利な API（フォーム送信ペイロードからテキスト値を取得する data.get("text") など）を提供します。
Next.js サーバー アクションを使用してレビュー フォームの送信を処理する手順は次のとおりです。
src/components/ReviewDialog.jsxファイルで、<form>要素のaction属性を見つけます。
<form action={handleReviewFormSubmission}>
action 属性値は、次のステップで実装する関数を参照します。
src/app/actions.jsファイルで、handleReviewFormSubmission()関数を次のコードに置き換えます。
// This is a next.js server action, which is an alpha feature, so
// use with caution.
// https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
export async function handleReviewFormSubmission(data) {
const { app } = await getAuthenticatedAppForUser();
const db = getFirestore(app);
await addReviewToRestaurant(db, data.get("restaurantId"), {
text: data.get("text"),
rating: data.get("rating"),
// This came from a hidden form field.
userId: data.get("userId"),
});
}
レストランのレビューを追加する
レビュー送信のサポートを実装したので、レビューが Cloud Firestore に正しく挿入されていることを確認できます。
レビューを追加して Cloud Firestore に挿入されていることを確認するには、次の手順を行います。
- ウェブアプリのホームページから、レストランを選択します。
- レストランのページで
をクリックします。 - 評価を選択してください。
- クチコミを書く。
- [送信] をクリックします。投稿したクチコミは、クチコミの一覧の一番上に表示されます。
- Cloud Firestore で、[ドキュメントを追加] ペインでレビューしたレストランのドキュメントを検索し、選択します。
- [コレクションを開始] ペインで、[評価] を選択します。
- [ドキュメントの追加] ペインで、確認するドキュメントを見つけて、想定どおりに挿入されたことを確認します。
9. ウェブアプリからユーザーがアップロードしたファイルを保存する
このセクションでは、ログインしたときにレストランに関連付けられている画像を置き換えることができる機能を追加します。この画像を Firebase Storage にアップロードし、レストランを表す Cloud Firestore ドキュメント内の画像の URL を更新します。
ウェブアプリからユーザーがアップロードしたファイルを保存するには、次の手順を行います。
src/components/Restaurant.jsxファイルで、ユーザーがファイルをアップロードしたときに実行されるコードを確認します。
async function handleRestaurantImage(target) {
const image = target.files ? target.files[0] : null;
if (!image) {
return;
}
const imageURL = await updateRestaurantImage(id, image);
setRestaurant({ ...restaurant, photo: imageURL });
}
変更は必要ありませんが、updateRestaurantImage() 関数の動作は次の手順で実装します。
src/lib/firebase/storage.jsファイルで、updateRestaurantImage()関数とuploadImage()関数を次のコードに置き換えます。
export async function updateRestaurantImage(restaurantId, image) {
try {
if (!restaurantId)
throw new Error("No restaurant ID has been provided.");
if (!image || !image.name)
throw new Error("A valid image has not been provided.");
const publicImageUrl = await uploadImage(restaurantId, image);
await updateRestaurantImageReference(restaurantId, publicImageUrl);
return publicImageUrl;
} catch (error) {
console.error("Error processing request:", error);
}
}
async function uploadImage(restaurantId, image) {
const filePath = `images/${restaurantId}/${image.name}`;
const newImageRef = ref(storage, filePath);
await uploadBytesResumable(newImageRef, image);
return await getDownloadURL(newImageRef);
}
updateRestaurantImageReference() 関数はすでに実装されています。この関数は、Cloud Firestore にある既存のレストランのドキュメントを更新し、更新された画像の URL を指定します。
画像アップロード機能を確認する
画像が想定どおりにアップロードされることを確認する手順は次のとおりです。
- ウェブアプリで、ログインしていることを確認し、レストランを選択します。
をクリックして、ファイル システムから画像をアップロードします。イメージはローカル環境を離れ、Cloud Storage にアップロードされます。アップロードした画像はすぐに表示されます。- Cloud Storage for Firebase に移動します。
- レストランを表すフォルダに移動します。アップロードした画像がフォルダ内に存在します。
10. まとめ
これで完了です。Firebase を使用して Next.js アプリに機能を追加する方法を学びました。具体的には、次のものを使用しました。
- Firebase Authentication: ログインとログアウトの機能を有効にします。
- レストラン データとレストランのレビューデータ用の Cloud Firestore。
- レストランの画像用の Cloud Storage for Firebase。