ryu-reu.me 構成メモ
ディレクトリ構成
mypageOnNext/
├── app/
│ ├── _sections/ # トップページ用のセクションコンポーネント（About等）
│ ├── api/
│ │ ├── posts/ # 記事 CRUD API（GET/POST + slug別取得）
│ │ └── upload/ # 画像アップロード API
│ ├── blog/ # ブログ一覧ページ（ページング付き）
│ ├── components/ # 共通コンポーネント群
│ ├── contexts/ # React Context（PostsCache等）
│ ├── generated/ # Prisma Client 自動生成ファイル
│ ├── login/ # ログインページ
│ ├── posts/[slug]/ # 記事詳細ページ（slug ベースのルーティング）
│ ├── upload/ # 記事エディタページ（認証必須）
│ ├── layout.tsx # ルートレイアウト（OGP/メタデータ含む）
│ ├── page.tsx # トップページ
│ ├── robots.ts # クローラー制御
│ └── sitemap.ts # サイトマップ動的生成
├── lib/
│ ├── csrf.ts # CSRF 対策ヘルパー
│ ├── prisma.ts # Prisma クライアント
│ └── supabase/ # Supabase クライアント
├── middleware.ts # 認証ミドルウェア（/upload保護）
├── prisma/
│ ├── schema.prisma # DBスキーマ（User, Post, Image）
│ └── migrations/ # マイグレーション履歴
├── public/ # 静的ファイル
├── types/ # TypeScript 型定義
├── .claude/ # Claude Code 設定
├── .github/workflows/ # CI/CD
└── .storybook/ # Storybook 設定過剰な気もするな
ブログ機能が多少盛った
ちゃんとしたCMSっぽく
- 記事エディタ — Markdown エディタ + リアルタイムプレビュー。画像はドラッグ&ドロップで Supabase Storage にアップロードして本文に自動挿入される。下書きは localStorage に自動保存されるので、うっかりタブ閉じても大丈夫。
- ブログ一覧 — ページング付き。Server Component で Prisma から直接取得してるので速いらしい。
- 記事詳細 (
/posts/[slug]) — cuid じゃなくて slug ベースの URL になった。人間が読めるURLは正義。シェアボタン付き（X、LINE、コピー）。
認証が入った
Supabase Auth
仕組みとしては cookie ベースのセッション管理で、Supabase クライアントを ブラウザ用・サーバー用・ミドルウェア用 に3分割してる。これは Next.js の実行環境ごとに cookie の読み書き方法が違うから。詳しくは lib/supabase/ を見てもらえれば。
SEO 対策した
layout.tsxにサイト全体のOGP設定- 記事詳細ページは
generateMetadata()で記事ごとに動的にOGPを生成 robots.tsとsitemap.tsを追加。サイトマップは記事の追加・更新に応じて自動生成
DB スキーマ
User ──< Post ──< Image- User: id, email。Supabase Auth のユーザーと同じメアドで紐付け。
- Post: title, slug, content, published, authorId。slug はタイトルから自動生成。
- Image: url, path, postId。Supabase Storage にアップした画像のメタ情報。
slugの扱いこれでいいのかは納得いってない
技術スタック
| カテゴリ | 採用技術 |
|---|---|
| フレームワーク | Next.js 16 (App Router) |
| 言語 | TypeScript |
| スタイリング | Tailwind CSS |
| DB/ORM | Supabase (PostgreSQL) + Prisma |
| ストレージ | Supabase Storage |
| 認証 | Supabase Auth |
| アニメーション | framer-motion |
| テスト | Vitest |
| UIカタログ | Storybook |
| CI/CD | GitHub Actions + Vercel |
まとめ
ボイラープレートの域を超えて実際に使えるブログになったと思う。画像アップロード、認証、SEO まで一通り揃ったのでとりあえず記事を書いて運用できそう