このサイトについて（2025年版）
概要
このポートフォリオサイトは、Next.js 13の最新機能を活用し、動的なSEO対応、ダークモード、レスポンシブデザインなど、現代的なWeb技術を取り入れて構築されています。さらに、App Routerを利用したクリーンなURL構造や、Redisを活用したページビューカウント機能など、機能面でも洗練されています。
https://portfolio.prodouga.com/
使用技術 🛠️
-
Next.js 13
最新のApp Routerを活用し、クリーンなURL構造と高速なレンダリングを実現。 -
Tailwind CSS
スタイリングに利用。カスタマイズ性が高く、メンテナンス性に優れたCSSフレームワーク。 -
Contentlayer
Markdown記事の管理を効率化。ブログ記事やプロジェクト情報を簡単に更新可能。 -
Upstash Redis
ページビューカウンターとして使用。軽量かつ高速なデータベースソリューション。
制作意図 🎯
-
Next.jsの最新機能を学ぶ
App RouterやServer Componentsなど、新しい機能の実践的な活用。 -
SEOに優れたサイトを構築する
動的なメタタグ生成や高速レンダリングで検索エンジン最適化。 -
管理の容易さを重視する
Markdownベースのコンテンツ管理と再利用可能なコンポーネント設計。
こだわりポイント ✨
-
App RouterによるクリーンなURL構造
URL設計が直感的でわかりやすく、SEOにも効果的。 -
動的なSEO対応
ページごとに異なるメタタグ（タイトルやディスクリプション）を動的に生成。 -
ダークモード対応
ユーザーの好みに応じてライトモード・ダークモードを切り替え可能。 -
レスポンシブデザイン
モバイルからデスクトップまで幅広いデバイスに対応。
ディレクトリ構造
以下は、このプロジェクトのディレクトリ構造です（node_modules は除外）。
.
├── LICENSE
├── README.md
├── app
│ ├── components # 再利用可能なUIコンポーネント
│ ├── contact # お問い合わせページ
│ ├── layout.tsx # サイト全体のレイアウト設定
│ ├── page.tsx # トップページ
│ └── projects # プロジェクトページ
├── content # Markdown形式で管理されるコンテンツ
│ └── projects # プロジェクトデータ
├── contentlayer.config.js # Contentlayer設定ファイル
├── global.css # グローバルCSS設定
├── mdx-components.tsx # MDX用カスタムコンポーネント
├── next-env.d.ts # Next.js環境定義ファイル
├── next.config.mjs # Next.js設定ファイル
├── package-lock.json # npm依存関係ロックファイル
├── package.json # npm依存関係管理ファイル
├── pages # APIルートなど旧式のページディレクトリ
│ └── api # APIエンドポイント
├── pnpm-lock.yaml # pnpm依存関係ロックファイル
├── postcss.config.js # PostCSS設定ファイル
├── public # 静的アセット（画像やフォント）
│ ├── favicon.png # ファビコン画像
│ ├── fonts # フォントファイル
│ ├── og.png # OG画像（SNS共有用）
│ └── planetfall.png # その他画像
├── rome.json # Romeツール設定ファイル（コードフォーマッター）
├── tailwind.config.js # Tailwind CSS設定ファイル
├── tsconfig.json # TypeScript設定ファイル
├── types # 型定義ファイルディレクトリ
│ └── mdx.d.ts # MDX用型定義ファイル
└── util # ユーティリティ関数ディレクトリ
└── mouse.ts # マウス関連ユーティリティ関数
特徴と技術スタックの詳細
1. App RouterによるクリーンなURL設計
Next.js 13のApp Routerを活用し、ページごとに直感的で整理されたURL構造を実現。これによりSEO効果も向上しています。
2. ContentlayerでMarkdown管理
Markdown形式で記事やプロジェクト情報を管理することで、非エンジニアでも簡単にコンテンツを更新可能です。
3. Upstash Redisでページビューカウント
軽量かつスケーラブルなRedisを使用して記事ごとのページビュー数をリアルタイムで記録。サーバーレス環境にも最適です。
4. Tailwind CSSによる効率的なスタイリング
ユーティリティクラスベースのスタイリングで開発効率が向上。カスタムテーマ設定も容易です。
まとめ
このポートフォリオサイトは、最新のWeb技術スタックと設計パターンを取り入れた実践的な例です。以下の点が特徴です：
- Next.js 13のApp RouterとServer Componentsによる高速レンダリング。
- ContentlayerとMarkdownによる効率的なコンテンツ管理。
- Upstash Redisによるリアルタイムデータ処理。
- Tailwind CSSによる美しいデザインと高いメンテナンス性。
- ダークモードやレスポンシブデザインへの対応でユーザー体験向上。
これらの技術を活用することで、パフォーマンスと管理性に優れたモダンなWebサイトが構築できます。ぜひ参考にしてください！ 🎉