勉強目的で簡易ブログサービスを作ってみた

全体像

Next.js、Supabase, Clerk あたりの雰囲気をつかんでみたかったので、Next.js 15（App Router）をベースに、Clerk を用いた認証機能と Supabase を用いたデータベースストレージを組み合わせた超シンプルなブログサービスを開発してみた。Next.js の実装はかなり AI (ChatGPT o4-mini-high) に助けて貰った。

アプリケーションの全体像

• フロントエンド：Next.js 15（App Router）＋TypeScript＋Tailwind CSS でページ構築
• 認証・認可：Clerk（@clerk/nextjs）によるログイン・ユーザー管理
• データ層：Supabase（Postgres）に記事を保存、Row‑Level Security で公開制御
• 運用：Supabase Studio でのテーブル編集による記事追加・更新

アーキテクチャ

1. Next.js App Router

   • app/news/page.tsx：一覧取得（Supabase クエリ）
   • app/news/[slug]/page.tsx：認証チェック→記事取得→Markdown→HTML

2. Clerk

   • middleware.ts またはコンポーネント内で auth() を呼び、未認証者をサインインページへリダイレクト

3. Supabase

   • テーブル構成：news_posts(id, slug, title, content, published, created_at)
   • RLS ポリシー：published = true のみ SELECT 許可
   • Client：lib/supabaseClient.ts で createClient を共通管理

4. スクリプト

   • scripts/migrate-md-to-db.ts：data/news/*.md → Supabase upsert

5. ホスティング

   • Vercel 等にデプロイするところは今回は省略。

実装手順、所要時間

フェーズ	タスク内容	所要時間
初期実装	Markdownファイルの読み込みによる記事一覧・詳細ページの実装	2時間
UI整備	Tailwind CSSによる一覧・詳細ページのスタイリング	1時間
認証組み込み	Clerk SDK導入および認証保護ルート実装	2時間
マイグレーション	MarkdownからSupabaseへのデータマイグレーション	1時間
データ取得切替	app/news のファイル読み込みをSupabaseクエリに切り替え	1時間
テスト	動作確認、RLS・環境変数チェック	1時間

学び、所感

• 高速プロトタイピング：細かい所は気にせずとりあえず作ってみたが、Clerk × Supabase の組み合わせで、認証→データ管理→公開まで短期間で実装可能という感覚が掴めた。Clerk 認証で無限ループが発生する問題のトラシューに時間が掛かった。Next.js 側で Cookie を読むページは静的化せず動的レンダリングに切り替えることで直った。当初はリダイレクトも含めて静的ビルドしてしまっていた。
• App Router の恩恵：Server Component での非同期処理と Server Actions の併用で、クライアントとサーバーの境界が明確化。