こんにちは、白澤です。
最近、事例紹介ページにカテゴリーで絞り込む機能を実装しました。
そもそも事例紹介ページがどうやってできているか、若干特殊な作りをしているので今回は紹介できればと思います。
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 なるものができたので、こっちに移行したいなという気持ちがありますが、それなりに変更箇所が多いので対応はだいぶ先になりそうですね。。。