サイト構成と技術構成

このサイト（miyakoh.me）の技術的な構成についてまとめました。

技術スタック

カテゴリ	技術
フレームワーク	Next.js (App Router) + TypeScript
スタイリング	Tailwind CSS v4
テーマ	next-themes（ダーク/ライトモード切替）
ブログ	MDX (gray-matter + next-mdx-remote)
コンタクトフォーム	Resend
デプロイ	Vercel

ページ構成

サイトは大きく分けて以下のページで構成されています。

トップページ

注目コンテンツを並べた Featured セクションと、各プラットフォームでの発信をまとめた Timeline セクションを表示しています。サイト全体のハブとなるページです。

About

自己紹介ページです。プロフィールや経歴を掲載しています。

Post

このサイト内のブログ記事を一覧・閲覧するためのページです。記事は MDX 形式で管理しており、この記事もその一つです。

Contact

お問い合わせ用のフォームページです。メールアドレスとメッセージを入力して送信できます。

RSS

RSS フィードも配信しており、お好みのリーダーで記事の更新を購読できます。

タイムライン

トップページには、複数の外部サービスから取得したコンテンツを統合して表示するタイムライン機能があります。

各ソースのデータはビルド時に並列で取得され、日付順にソートされます。ISR（Incremental Static Regeneration）により、1時間ごとに最新データへ更新されます。

表示はタブで絞り込むことができ、All（全ソース）、X、Post（サイト内記事）、Writing（Zenn + しずかなインターネット）の4種類があります。また、年ごとにグルーピングされ、過去の年は折りたたまれた状態で表示されます。

コンタクトフォーム

お問い合わせフォームは、Next.js の API Route と Resend を組み合わせて実装しています。

スパム対策として、IP ベースのレート制限（1時間に5回まで）を設けています。

まとめ

このサイトは Next.js の App Router による静的生成と ISR を組み合わせた構成です。RSS や API を通じて外部サービスのコンテンツを集約するタイムライン機能により、さまざまなプラットフォームでの発信を一箇所にまとめています。