Portfolio
プロジェクト一覧に戻る

Portfolio Website

Next.js 15 + React 19を使用した個人ポートフォリオサイト。プロジェクト一覧、MDXによるブログシステム、レジュメ管理機能を実装。

2025年9月 - 現在
•
開発中
Portfolio Website
GitHubリポジトリ

使用技術

Next.jsReactTypeScriptTailwind CSSMDX

プロジェクト概要

Next.js 15 + React 19を使用した個人ポートフォリオサイト。MDXによるブログシステム、プロジェクト展示、レジュメ管理機能を実装。

技術選択の理由

Next.js 15

  • App Router: 最新のルーティングアーキテクチャによる効率的な開発
  • Server Components: パフォーマンス最適化とSEO対応
  • Static Generation: 高速なページ読み込み

React 19

  • 最新機能: useActionState、useOptimisticなど最新のフック
  • パフォーマンス: 改善されたレンダリングエンジン

TypeScript

  • 型安全性: コンパイル時のエラー検出
  • 開発効率: IDEの強力なサポート

実装の詳細

プロジェクト構造

src/
├── app/              # Next.js App Router
├── components/       # Reactコンポーネント
├── lib/             # ユーティリティ関数
└── types/           # TypeScript型定義

主な機能

  1. プロジェクト一覧: フィルタリング、ソート機能
  2. ブログシステム: MDX対応の記事投稿
  3. レスポンシブデザイン: 全デバイス対応

課題と解決策

チャレンジ1: パフォーマンス最適化

課題: 画像の読み込みが遅い

解決策: Next.js Imageコンポーネントを使用した自動最適化

チャレンジ2: SEO対応

課題: 動的ページのメタデータ管理

解決策: generateMetadata関数による動的メタデータ生成

学んだこと

  • Next.js 15の最新機能の実践的な活用
  • Server ComponentsとClient Componentsの適切な使い分け
  • Tailwind CSSによる効率的なスタイリング