制作実績や技術記事を継続的に更新できるよう、Next.jsとmicroCMSを組み合わせたポートフォリオサイトを設計しました。実績、カテゴリー、記事をそれぞれ管理し、管理画面から追加した内容が一覧ページと詳細ページへ反映される構成です。
閲覧者が目的の実績を探しやすいよう、カテゴリー絞り込みと関連記事表示を用意しました。画像の縦横比を事前に確保し、読み込み時のレイアウト移動やカクつきを抑えています。
TypeScriptでCMSレスポンスの型を定義し、静的生成と再検証を使い分けています。更新性を保ちながら、初期表示の速いサイトを目指したサンプルです。