Next.jsでFirebase9のリアルタイム更新機能を使う

Next.jsでFirebase9のリアルタイム更新機能を使います。

###サンプルコード

１００から始まり、＋を押すと１を加え、ーを押すと１減らすプログラムです。
このコードをベースにします。

import React from 'react';
import {useState, useEffect} from "react";

export const UserCount = React.createContext();

function  Test() {

  const[count, setCount] = useState(100);

  return (
    <>
      <div style={{ textAlign: 'center' }}>
        <h1>Test</h1>
          <p>{count}</p>
          <button onClick={() => setCount(count - 1)}>-</button>
          <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    </>
  );
}

export default Test;

###サンプルデータベース

サンプルのデータベースはこちらです。
counterというコレクションに、countというフィールドを設定しています。

###リアルタイム更新を行うソースコード

onSnapshotを使用します。

import React from 'react';
import {useState, useEffect} from "react";
import {collection, doc, query, onSnapshot} from "firebase/firestore";
import {db} from '/lib/firebase';

export const UserCount = React.createContext();

function  Test() {

  const[count, setCount] = useState(100);

  //データを表示する処理（初回のみ）
  useEffect(async()=> {

    //DBリアルタイム更新設定
    const q = query(collection(db, "counter"));
    const unsub = onSnapshot(q, (queryCounterSS) => {

      let l_count = 0;
      queryCounterSS.forEach((doc) => {
        if (doc.exists()) {
          console.log("Current data: ", doc.data().count);
          l_count = doc.data().count;
        }
      });

      setCount(l_count);
    });
  },[]);


  return (
    <>
      <div style={{ textAlign: 'center' }}>
        <h1>Test</h1>
          <p>{count}</p>
          <button onClick={() => setCount(count - 1)}>-</button>
          <button onClick={() => setCount(count + 1)}>+</button>
      </div>
    </>
  );
}

export default Test;

この状態でデータベースの値を変更すると、ブラウザ上の値にも即反映されます。

さらにsetDocでデータベースへの書き込み処理を追加すれば
ブラウザとデータベースのどちら側で値を変更しても、即反映されます。

以上です。

###参考サイト