本サイトです。制作したポートフォリオを載せるサイトとして制作しました。
MicroCMSとNext.jsを組み合わせたJAMstackアーキテクチャのサイトになります。
MicroCMS
バックエンド側はMicroCMSを利用しました。
- 各投稿（/blogs/⚪︎⚪︎）はMicroCMSで投稿できるように設計
- 投稿の他「スキル」「カテゴリ」というエンドポイントを設け、skillsセクションは管理画面から投稿できるように設計
- カスタムフィールドで、各投稿に関連する「スキル」エンドポイントを表示できるように設計
Next.js
フロントエンドはNext.js（バージョン14）でコーディングしました。
- App Routerを使用
- デプロイ先はVercelを使用
- TypeScriptを使った型定義を使用（APIデータはMicroCMSの型定義と連携）
- CSSは基本TailwindCSSを使ってコンポーネント単位で記述
- スムーススクロールやハンバーガーメニューなど各種フックを使った処理を実装