Next.js 14でこのサイトを作った話（そして、なぜそれを選んだのか）

はじめに

最初のブログ記事を書く前に、まずサイト自体を作る必要がありました。

このウェブサイトは単なるブログではありません。メインページでは職務経歴を紹介し、CVのダウンロードもできます。そしてブログは、学んだことをシェアするためのスペースです。

速くて、SEOに強く、将来的にも拡張しやすいものが欲しかった。だからこそ基盤としてNext.js 14を選びました。

この記事では、このサイトをどのように作ったか、各技術スタックを選んだ理由、そして開発を通じて学んだことをシェアします。

自分のサイトを自作した理由

ポートフォリオのテンプレートやブログプラットフォームはたくさんあります。でも、本当に自分のものと感じられるサイトが欲しかった。

目標はシンプルでした：

職務経歴をわかりやすく紹介する
ダウンロード可能なCVを提供する
学びのメモや実験を書くブログを持つ
将来的に成長・改善できる余地を残す

また、ただ読むだけでなく、実際に現代的なウェブ開発のテクニックを実践できる本物のプロジェクトが欲しかったという理由もあります。

なぜNext.js 14を選んだのか

Next.js 14はこのプロジェクトに最適な選択肢でした。

選んだ理由のいくつか：

App Routerによるクリーンでスケーラブルなルーティング
Metadata APIによるビルトインのSEOサポート
デフォルトで優れたパフォーマンス
静的・動的コンテンツの柔軟な扱い
Vercelとのスムーズなデプロイ体験

セットアップに時間をかけすぎず、コンテンツや構造により集中できる点が気に入っています。

技術スタック

サイトを支える技術と、それぞれを選んだ理由：

Next.js 14 — App Routerを使ったコアフレームワーク
TypeScript — 型安全性と保守性の向上
Tailwind CSS — 高速で一貫したスタイリング
Markdown / MDX — シンプルで読みやすいブログコンテンツ
Framer Motion — さりげないアニメーションとモーションUI
Vercel — デプロイとホスティング
Vercel Analytics — パフォーマンスとトラフィックの分析
Google Analytics — 訪問者の行動とページトラッキング

モーションUI

サイトが邪魔にならない程度に、スムーズでモダンな雰囲気になるようにしました。

Framer Motionを使って追加したもの：

柔らかなフェードインアニメーション
セクションが表示される際のなめらかなトランジション
視線を自然に誘導する軽いインタラクション

これらのアニメーションは意図的にさりげなく設計しています——コンテンツの邪魔をするのではなく、体験を引き立てることが目的です。

アナリティクスとモニタリング

サイトを公開してから、実際にどのように使われているか知りたいと思いました。

そのために追加したもの：

Vercel Analytics — パフォーマンス、ページビュー、Core Web Vitalsのモニタリング
Google Analytics — 訪問者の行動、人気ページ、流入元の把握

このセットアップで：

最も訪問されているページがわかる
ブログが発見されているか測定できる
SEOとパフォーマンスの改善を数値で追える

推測ではなく、実際のデータをもとに判断できるようになりました。

プロジェクト構成（GitHubより）

ソースコードはこちらで公開しています： https://github.com/cokyudi/yudi-simple-portfolio

フォルダ構成の概要：

app/                 # App Router（ルート、レイアウト、ページ）
├─ layout.tsx        # ルートレイアウト（メタデータ、グローバルレイアウト）
├─ page.tsx          # ホームページ（職務経歴、CVダウンロード）
├─ blog/             # ブログのルート
│  ├─ page.tsx       # ブログ一覧ページ
│  └─ [slug]/        # 個別ブログ記事ページ
│     └─ page.tsx
├─ not-found.tsx     # カスタム404ページ
components/          # 再利用可能なUIコンポーネント
constants/           # リンク、i18n、静的な定数
context/             # 言語切り替えのグローバルステート
lib/                 # ユーティリティ（MDXパース、ヘルパー、SEOなど）
posts/               # MDXで書かれたブログコンテンツ
public/              # 静的アセット（画像、ロゴ、CV PDF）
styles/              # グローバルスタイルとTailwindの設定

この構成により、コンテンツ・UI・ロジックが明確に分離され、保守しやすい構造になっています。

うまくいったこと

開発中、特によかったことをいくつか：

Next.jsのMetadata APIを使ったSEO設定はシンプルだった
静的ページの読み込みが速い
Vercelへのデプロイがスムーズだった
ポートフォリオとブログを一つにまとめるのが自然にできた
アナリティクスの統合がシンプルながら強力だった

早い段階で良いパフォーマンスが確認できたことは、大きなモチベーションになりました。

苦労したこと

もちろん、最初からうまくいくわけではありませんでした：

SEO設定をどこまでやれば「十分か」の判断
Markdownコンテンツのスタイリングを一貫させること
アニメーションをさりげなく抑えること
ポートフォリオとブログコンテンツのバランスを取ること

それぞれの課題が、実際のプロダクションサイトがどのように進化していくかをより深く理解させてくれました。

次に改善したいこと

このサイトはまだ始まりに過ぎません。次のステップのアイデア：

RSSフィードの追加
ブログ検索の実装
アニメーションのさらなる強化
ブログのアイキャッチ画像の追加
Core Web Vitalsの改善
Next.jsとSEOについてより深い技術記事を書く

おわりに

Next.js 14でこのサイトを作ったことで改めて感じたのは、学ぶのに最もいい方法は、実際に何かを作ることだということです。

このサイトはこれからも学びとともに進化し続け、ブログはその旅を記録し続けます。

もし自分のポートフォリオやブログを作ることを考えているなら、シンプルなアドバイスをひとつ：小さく始め、早く公開し、継続的に改善する。

読んでくれてありがとうございます——次の記事もお楽しみに 🙏