Uma Code

Uma Code
  • React
  • TypeScript
  • Next.js
  • MicroCMS
  • CSS・Sass

本サイトです。制作したポートフォリオを載せるサイトとして制作しました。
MicroCMSとNext.jsを組み合わせたJAMstackアーキテクチャを使用したサイトとなります。

仕様

管理画面

バックエンド側はMicroCMSを利用しました。※画像クリックで拡大します。

  • 各投稿(/blogs/⚪︎⚪︎)はMicroCMSで投稿できるように設計
  • 投稿の他「スキル」「カテゴリ」というエンドポイントを設け、skillsセクションは管理画面から投稿できるように設計
  • カスタムフィールドで、各投稿に関連する「スキル」エンドポイントを表示できるように設計

フロント側

フロントエンドはNext.js(バージョン14)でコーディングしました。

  • App Routerを使用
  • デプロイ先はVercelを使用
  • TypeScriptを使った型定義を使用(APIデータはMicroCMSの型定義と連携)
  • CSSは基本TailwindCSSを使ってコンポーネント単位で記述
  • スムーススクロールやハンバーガーメニューなど各種フックを使った処理を実装

URL構成

  • トップ:/
  • ポートフォリオ一覧:/blog
  • ポートフォリオ詳細記事:/blog/{id}

使用技術

  • React
  • TypeScript
  • Next.js
  • MicroCMS
  • Vercel
  • Git
  • Tailwind CSS

デプロイ環境

  • Vercel