Next.js 13のApp Routerを活用した未来志向のポートフォリオサイト

# このサイトについて（2025年版）

## **概要**
このポートフォリオサイトは、**Next.js 13**の最新機能を活用し、動的なSEO対応、ダークモード、レスポンシブデザインなど、現代的なWeb技術を取り入れて構築されています。さらに、**App Router**を利用したクリーンなURL構造や、**Redis**を活用したページビューカウント機能など、機能面でも洗練されています。

[![スクリーンショット 2023-12-28 19.18.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/4b833432-85f6-356c-289f-c223a233c764.png)](https://portfolio.prodouga.com)

[https://portfolio.prodouga.com/](https://portfolio.prodouga.com/)

---

## **使用技術** 🛠️

- **Next.js 13**  
  最新のApp Routerを活用し、クリーンなURL構造と高速なレンダリングを実現。
  
- **Tailwind CSS**  
  スタイリングに利用。カスタマイズ性が高く、メンテナンス性に優れたCSSフレームワーク。

- **Contentlayer**  
  Markdown記事の管理を効率化。ブログ記事やプロジェクト情報を簡単に更新可能。

- **Upstash Redis**  
  ページビューカウンターとして使用。軽量かつ高速なデータベースソリューション。

---

## **制作意図** 🎯

1. **Next.jsの最新機能を学ぶ**  
   App RouterやServer Componentsなど、新しい機能の実践的な活用。

2. **SEOに優れたサイトを構築する**  
   動的なメタタグ生成や高速レンダリングで検索エンジン最適化。

3. **管理の容易さを重視する**  
   Markdownベースのコンテンツ管理と再利用可能なコンポーネント設計。

---

## **こだわりポイント** ✨

- **App RouterによるクリーンなURL構造**  
  URL設計が直感的でわかりやすく、SEOにも効果的。

- **動的なSEO対応**  
  ページごとに異なるメタタグ（タイトルやディスクリプション）を動的に生成。

- **ダークモード対応**  
  ユーザーの好みに応じてライトモード・ダークモードを切り替え可能。

- **レスポンシブデザイン**  
  モバイルからデスクトップまで幅広いデバイスに対応。

---

## **ディレクトリ構造**

以下は、このプロジェクトのディレクトリ構造です（`node_modules` は除外）。

```bash
.
├── 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技術スタックと設計パターンを取り入れた実践的な例です。以下の点が特徴です：

1. Next.js 13のApp RouterとServer Componentsによる高速レンダリング。
2. ContentlayerとMarkdownによる効率的なコンテンツ管理。
3. Upstash Redisによるリアルタイムデータ処理。
4. Tailwind CSSによる美しいデザインと高いメンテナンス性。
5. ダークモードやレスポンシブデザインへの対応でユーザー体験向上。

これらの技術を活用することで、パフォーマンスと管理性に優れたモダンなWebサイトが構築できます。ぜひ参考にしてください！ 🎉