こんにちは、白澤です。

最近、事例紹介ページにカテゴリーで絞り込む機能を実装しました。
そもそも事例紹介ページがどうやってできているか、若干特殊な作りをしているので今回は紹介できればと思います。

2023年7月18日現在、コーポレートサイトは Next.js で開発されているのですが、その中でそもそも事例紹介のデータを現状どのように管理しているかというと、data というディレクトリの中に cases.ts というファイルを作って、その中に JSON のような感じで Object の配列を格納する感じにしています。

なぜ cases.ts のように JSON ではなくしているかというと、型定義をしっかりしたいからですね。JSON でもできないことはないと思いますが、こうした方が個人的に手っ取り早かった。

ちなみに今後は cases.ts を import ではなく API 経由でデータを取得してあげるようにしたいですね。これは事例データが大量になってきたら考えることにします。

あとは export された cases.ts のデータを SG で生成するだけですね。

export const getStaticPaths = async () => {
  const paths = CASES.map((c) => `/case-study/${c.slug}`);
  return { paths, fallback: false };
};

export const getStaticProps = async (context: any) => {
  const slug = context.params.slug;
  const data = CASES.find((c) => c.slug === slug);
  return {
    props: {
      data,
    },
  };
};

個別ページはこういうイメージです。

本題の一覧ページですが、この cases.ts の配列を filter してあげるだけです。

まず、どのカテゴリーが選択されているかを useState で管理してあげます。初期値は useRouter().query.category とします。
あとはその state で filter する条件をその都度変更しているだけです。だいぶシンプルですね。

以上、今回はちょっとした開発の裏側のご紹介でした。Next.js は、最近 App Router なるものができたので、こっちに移行したいなという気持ちがありますが、それなりに変更箇所が多いので対応はだいぶ先になりそうですね。。。