firebase Next.js React TypeScript

Reactと Firebase Realtime Databaseでデータを取得する方法 Next.js

 

本日の記事では、Reactを使って、Firebase の Realtime Databaseからデータを取得する方法を解説します。

 

ちなみに、ReactはNext.jsを使ってますので、適切にあなたの環境に読み替えてください。

 

根幹となる部分は全部同じです。

 

Firebase Realtime Databaseを作成する

 

Firebase Realtime Databaseの管理画面からデータベースを作成しましょう。

 

 

 

データベースの設定をします、ここは米国のままで良いでしょう。

 

 

ロックモードを選択して、後でログインユーザーのみデータにアクセスできるようにルールを書き換えます。

 

もし、最初はテストモードで誰でもアクセスできるようにしたければ、テストモードで開始してください。

 

 

こうすると、データベースが作成されました。

 

まだ中身が何も入ってないので、適当にデータを入れます。

 

 

test.jsというファイルを作っておいて、これをインポートします。

 

 

こういうjsonをインポートしてください。

 

 

すると、こういう感じでデータが作成されます。

 

 

次に、データベースのルールを変更します。

 

先ほどは、ロックモードでデータベースを作ったので、全てのアクセスは拒否されます。

 

これを、下記のように、authが通ってるユーザーだけ認証するようにします。

 

(詳しくは下記のブログは少し参考になります。Firebaseでauthを通すやり方です。)

 

 

 

ここまで来たら、次はfirebaseの設定ファイルを作ります、これを作らないとデータベースにアクセスできません。

 

ここの書き方なども今回は割愛します。



import "firebase/auth";
import "firebase/firestore";
import "firebase/database";

import firebase from "firebase/app";

const config = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGINGSENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
};
// initializeを複数回走らせない
if (firebase.apps.length === 0) {
firebase.initializeApp(config);
}

const database = firebase.database();
const auth = firebase.auth();
export { auth, database };

 

それで、最後に pages/posts/[id].tsx などに、下記のように書いていきます。

 


import { useMemo } from "react";
import { useRouter } from "next/router";
import { useState } from "react";
import { database } from "../../utils/firebase";

const Post = () => {
const router = useRouter();
const { id } = router.query;
const [value, setValue] = useState("データ読み込み中");

const dbRef = database.ref("posts/" + id);
dbRef
.get()
.then((snapshot) => {
if (snapshot.exists()) {
console.log(snapshot.val());
setValue(snapshot.val());
} else {
console.log("データ読み込み中");
}
})
.catch((error) => {
console.error(error);
});

return <p>Post: {value}</p>;
};

export default Post;

こんな感じですね!

 

こうすると、ブラウザで確認(http://localhost:3000/posts/1)すると、下記のようにデータが取得できます。

 

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

1
2
no image 3
4
5
6
7
8
9
10
no image 11
12
13
14
15
16
17
18
19
20
21
22
23

-firebase, Next.js, React, TypeScript