技術スタックの選定
このポートフォリオサイトは以下の技術スタックで構築しています：
- Next.js 15: App Router の採用と SSG 対応
- Tailwind CSS: スタイリングの効率化
- MDX: ブログコンテンツの管理
- TypeScript: 型安全な開発
なぜこの構成を選んだのか
基本的な技術選定としての一番の目的は, 最新の技術を取り入れつつ, シンプルな構成と SEO に特化した構成にしたい という思いがありますが, それぞれの技術については, 下記に記述します。
Next.js 15
App Router の採用により, ページ間のルーティングがより直感的になり, ファイルベースのルーティングで開発効率が向上しました。
また, SSG（Static Site Generation）により, ビルド時に静的な HTML を生成することで, 高速なページロードと SEO の最適化を実現しています。
Astro でも良かったのですが, 別の個人的なプロジェクトで触っているというのもあり, Next.js を使っています。
Tailwind CSS
utility-first のアプローチにより, カスタム CSS の記述を最小限に抑えながら,
レスポンシブデザインの実装が容易になりました。
また, dark mode への対応もdark:プレフィックスで簡単に実装できています。
light mode はまだ実装していないので今後実装予定です。
MDX の活用
ブログ記事を Markdown で管理しながら, 必要に応じて React コンポーネントを 埋め込める MDX を採用しています。
将来的には Notion 等を CMS にしてリモートのコンテンツを配信する想定です。
パフォーマンスの最適化
- 画像の最適化: Next.js の
Imageコンポーネントを使用 - フォントの最適化: next/font による最適化
- コードの分割: Dynamic Import による必要な部分のみの読み込み
まとめ
Next.js 15 と Tailwind CSS の組み合わせにより, 開発効率とパフォーマンスの両立を実現しました。 SSG による静的サイト生成により, 高速なページロードと SEO フレンドリーなサイトを構築することができました。
今後も新しい技術を積極的に取り入れながら, よりよいユーザー体験を提供できるよう改善を続けていきます。