Next.jsでのポートフォリオサイト制作

概要

このポートフォリオサイトをNext.jsで構築した際の技術的な詳細について記録します。

技術選択の理由

Next.js

• 静的サイト生成 (SSG) による高速なサイト表示
• SEO対策の容易さ
• Cloudflare Pagesとの相性の良さ

TailwindCSS

• ユーティリティファーストによる効率的なスタイリング
• レスポンシブデザインの実装の容易さ
• ダークモード対応

実装のポイント

1. 静的サイト生成の設定

// next.config.js
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
};

2. テーマシステム

Context APIを使用してダーク/ライトモードの切り替えを実装しました：

• localStorage での設定保存
• システムの設定に応じた自動切り替え
• スムーズなトランジション効果

3. アニメーション

TailwindCSSのカスタムアニメーションを使用して、ユーザーエクスペリエンスを向上させました：

• フェードイン効果
• ホバーアニメーション
• スクロールアニメーション

学んだこと

• Next.jsの静的生成の仕組み
• TailwindCSSの高度な使用方法
• レスポンシブデザインの実装手法
• アクセシビリティの考慮

今後の課題

• パフォーマンスの最適化
• SEO対策の強化
• コンテンツの充実
• ユーザビリティの向上

継続的に改善していく予定です。