Next.jsでのFirestoreのデータから個別ページを作成する方法

この記事では、Next.jsでのFirestoreのデータから個別ページを作成する方法を紹介します。
現在自分はポートフォリオを作成しており、その過程で投稿記事の個別ページが必要になりました。

FireStoreのデータから個別ページを作る方法が書かれていた記事が少なかったので、作成しました。

URL
https://manga-kousatu-net.vercel.app/
Github
https://github.com/takoyan33/manga-kousatu.net

個別ページの作成方法

まずNext.jsのダイナミックルーティング機能を用いて、個別ページを作ります。
公式記事はこちらです。

記事によるとダイナミックルーティングでページを作るには、
【】で囲んだファイルorフォルダを作る必要があります。

今回は、firestoreのtitleを使いたかったので、【title】.jsxを使います。
そして、【title】.jsxを作り、
queryでtitleを取得できるか確認します。

#【title】.jsx
const Post = () => {
〜省略〜
  const { title } = router.query;
  console.log({ title });

これでtitleが取得できれば、
今回の場合だと、titleが一致した記事のみを表示するという方法を使って、記事を表示します。
（これよりも良い方法があると思いますが、実装できていないのでこの方法で実装します。）

  const getData = async () => {
    //firestoreからデータ取得
    await getDocs(databaseRef).then((response) => {
      //コレクションのドキュメントを取得
      setFiredata(
        response.docs
          .map((data) => {
            //配列なので、mapで展開する
            return { ...data.data(), id: data.id };
            //スプレッド構文で展開して、新しい配列を作成
          })
          .filter((data) => {
            if (data.title === title) {
              return data;
              //そのまま返す
            } else if (
              data.title.toLowerCase().includes(title)
              //valのnameが含んでいたら小文字で返す　含んでいないvalは返さない
            ) {
              return data;
            }
          })
      );
    });
  };

fillterで一致したものを取得しています。
これで、後はmapで表示すれば完成です！

慣れると実装しやすいのでおすすめです。