無料掲載バッジを足す前に、既存特集とデータの入口を分けた話

今日は、Next.jsとTypeScriptで作っている掲載サイトに、期間限定の無料掲載バッジを追加した。

見た目だけなら、カードに小さなラベルを出せば終わる。ただ、既存の特集枠と同じ取得条件へ新しい掲載種別を混ぜると、別の特集ページに表示されたり、並び順が崩れたり、期限切れの掲載が残ったりする可能性がある。そこで、UIを触る前にデータの入口を分けることにした。

既存特集と無料掲載特集は、同じサロン情報を使いながらも目的が違う。取得処理では種別を明確に分け、掲載期限の判定、表示順、重複を避ける条件を共通関数へ集約した。ページごとに同じ判定をばらばらに書かず、Reactのcacheも使って、同じリクエスト内で不要な再取得が起きにくい形にした。

表示側では、既存のバッジを消さずに無料掲載バッジを追加し、PCとスマートフォンの両方で崩れを確認した。さらに、トップページのバナーからそれぞれ正しい特集へ移動すること、期限外のデータが出ないことも確認した。

最後にlint、型チェック、181ページのビルドを通し、本番でも既存特集と無料掲載特集が混ざっていないことを確認した。小さなバッジ追加でも、実際には「誰を、いつ、どこに表示するか」というデータ設計が重要だと改めて感じた。

Next.jsの既存サイト改修では、見た目の変更だけでなく、データ取得、期限判定、既存機能への影響まで確認します。小規模な表示追加や特集ページの整理からでもご相談ください。