My portfolio

前回のポートフォリオではhtml, scss, jqueryを用いてハードコーディングしていたため、新しい案件を追加するたびに手動でコードを編集する必要があり運用の負担が大きかった。

なので今回はmicroCMSとNext.jsを組み合わせ、ノーコードで柔軟にコンテンツを管理・反映できる仕組みに刷新した。

App RouterベースのNext.jsを用いて、CMSから取得した情報に応じた動的ルーティングを実現している。

自己紹介ページや案件の詳細情報はmicroCMSで管理されており、API経由で取得して各ページに反映される。リッチテキストには独自のレンダラーを実装することで、見出し・リスト・リンクなどの装飾表現にも柔軟に対応可能な構成とした。

microCMSのリッチエディタ内の装飾方法は、今回最も悩んだポイントだった。リッチテキストはHTML形式で提供されるため、単純に dangerouslySetInnerHTML を使うだけではデザインの一貫性や拡張性に課題があった。
最終的に、HTMLを構文解析する html-react-parser を用いて、要素ごとに独自のクラスや構造を与える方法を採用。これにより、柔軟なCSS設計が可能となり、見出しやリスト、強調表現なども一貫してスタイリングできるようになった。

詳細な対応は下記の記事にまとめている。

Client ComponentとServer Componentを適切に分離し、不要なJavaScriptの読み込みを抑制。ナビゲーションやコンテンツロードもストレスなく行える構成とした。CMS側でコンテンツ構造を設計し、非エンジニアでも更新できる仕組みを実現。

アニメーションの導入や多言語対応など、より広い読者に対応できるよう継続的に改善予定。