<it_dev />
← 記事一覧に戻る
Webアプリ

ポートフォリオをリプレイスしました!

2025年にリリースした自身のポートフォリオですが、完全に作り直すことにしてリリースしました

Next.jsReactTypeScriptmicroCMS

概要

コンテンツ管理をFirebaseで実装していましたが不便だったのでmicroCMSに変更、UIや機能も1から完全に作り直しました。

2025年のポートフォリオ

GitHub: https://github.com/itto1018/It_homepage

仕様

  • LPにほぼ全ての情報を掲載(Worksのみ、別ページを用意)
  • ブログや開発物はすべてWorksにリンクを貼るようにして外部のページを参照させるようにしていた

課題

  • 管理画面のログインに実装していた認証基盤(Firebase Auth)が不安定で、管理画面へログインできなくなった(おそらくNext.jsのバージョンアップ後から)
  • 画像データなどFirebaseに蓄積している関係で、取得までにタイムラグが発生
  • LP1枚だと情報量が多く微妙と感じ、UIを一新したかった

上記の既存の課題に加え、以下の新たな課題やアイデアが出てきました。

  • 投稿機能を細分化したかった(Works→実績などのPerformページ + メモ程度からブログ投稿用のBlogページ)
  • 単純に新たなツールに触れたかった(microCMSに加え、Claude CodeやDockerなど)
  • 既存が複雑なコードかつ上記のことを踏まえると、既存コードを改修するよりも作り直す方が早いと感じた

リプレイスに向けて

技術選定

  • Webフレームワーク: Next.js
    • 個人的にSSO対策が不要という点でReact + Viteの実装も検討したが、microCMSとの親和性を考えてNext.jsを採用
  • CMS: microCMS
    • シンプルに管理画面の使い勝手がいいと感じた
    • ヘッドレスCMSを採用することで、Webアプリケーションとコンテンツ管理の完全分離を図りたかった(管理画面を構築したくなかった)
    • 和製のツールということで以前から使ってみたかった
  • パッケージ管理: pnpm
    • あまりこだわりがないが、yarnやnpmと比べてキャッシュ効率が良くて爆速かつディスク容量も最小と言われているため