Next.js + Supabase の組み合わせは、個人開発者・学習者にとって最強の組み合わせの1つです。
Claude Codeと組み合わせると、認証付きCRUDアプリの雛形を10分で立ち上げられます。
本記事では、私が実際に毎週のように使っている「Next.js + Supabase 初期構築テンプレート」を、
Claude Codeにどう指示すれば良いかも含めて紹介します。
ゴール
以下の機能を持つアプリを10分で立ち上げる：
- メール/パスワード認証（Supabase Auth）
- ログイン後のダッシュボード（Server Component）
- Todo の CRUD 操作（作成・一覧・更新・削除）
- Row Level Security（他ユーザーのデータは見えない）
前提
- Node.js 20+ インストール済み
- Supabaseプロジェクト作成済み（URLとANON_KEYを控えておく）
- Claude Code インストール済み
Step 1: プロジェクト作成（1分）
npx create-next-app@latest todo-app --typescript --tailwind --app
cd todo-app
npm install @supabase/supabase-js @supabase/ssr
Step 2: CLAUDE.md の準備（2分）
プロジェクトルートに CLAUDE.md を作成：
# プロジェクト: Todo App
## 技術スタック
- Next.js 16 (App Router)
- Supabase (Auth + DB + RLS)
- Tailwind CSS
## コーディング規則
- Server Components を優先、必要な箇所のみ Client Components
- 認証チェックは middleware.ts で実施
- DB操作は Server Actions で実行（クライアントから直接DBアクセスしない）
- any型を使わない
- 環境変数は必ず process.env 経由、ハードコードしない
## ファイル配置
- `src/features/auth/` - 認証関連
- `src/features/todo/` - Todo機能
- `src/lib/supabase/` - Supabaseクライアント
Claude Code は CLAUDE.md を自動で読み込むため、「Next.js 16 は App Router で」等を毎回指示する必要がなくなります。
Step 3: Supabase クライアント生成（1分）
Claude Code にこう指示：
CLAUDE.md に従って、src/lib/supabase/ に server.ts と client.ts を作ってください。
@supabase/ssr の createServerClient と createBrowserClient を使います。
環境変数は NEXT_PUBLIC_SUPABASE_URL と NEXT_PUBLIC_SUPABASE_ANON_KEY を使います。
生成されるもの：
// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll: () => cookieStore.getAll(),
setAll: (cookies) => cookies.forEach(({ name, value, options }) => {
cookieStore.set(name, value, options)
})
}
}
)
}
Step 4: DBスキーマを Supabase で作成（2分）
Claude Code に SQL を生成させる：
todos テーブルを作成するSQL migration を書いてください。
- id (uuid, primary key)
- user_id (uuid, foreign key to auth.users)
- title (text, not null)
- completed (boolean, default false)
- created_at (timestamptz)
RLS を有効にして、自分の行のみ select/insert/update/delete 可能にしてください。
生成される SQL をSupabase管理画面のSQL Editorに貼り付けて実行。
Step 5: 認証ページと Todo ページを生成（3分）
Claude Code にまとめて指示：
CLAUDE.mdに従って以下を実装してください：
1. /login ページ（メール/パスワード入力フォーム、Server Action で signInWithPassword）
2. /dashboard ページ（Server Component、todos 一覧と追加フォーム）
3. middleware.ts（未認証なら /login にリダイレクト）
4. Server Actions で todo の作成・削除・完了切り替え
5. Tailwind CSS で最低限の見た目
Claude Code は CLAUDE.md の規則に沿って、Server Components 優先・Server Actions 使用・環境変数ハードコード禁止を守ったコードを生成してくれます。
Step 6: 動作確認（1分）
npm run dev
http://localhost:3000/login でサインアップ → /dashboard で Todo の追加・削除が動けば完成。
ハマりポイントと対処
1. Supabase のメール認証でメールが届かない
テスト中はSupabase管理画面の「Auth > Users」から直接ユーザーを作成するのが早い。
本番運用時は SMTP設定を忘れずに。
2. middleware.ts で無限リダイレクトになる
middleware.ts 内で /login 自体を除外する matcher 指定を忘れがち：
export const config = {
matcher: ['/((?!login|_next/static|_next/image|favicon.ico).*)']
}
3. RLS のテストは必ず2アカウントで
RLSは「自分で自分のデータを見る」テストだけだと気づけない穴がある。
必ず別のテストユーザーを作って「他人のデータが見えないこと」を確認する。
まとめ
Next.js + Supabase + Claude Code の組み合わせで、
- 認証付き
- RLSでセキュリティ確保
- CRUD操作
を持つアプリの雛形が10分で立ち上がります。
ポイントは、CLAUDE.md にプロジェクト規則を書いておくこと。
これをやっておくだけで、Claude Code が毎回「正しい」コードを書くようになります。
個人開発のスタート地点として、この構成は本当に強力です。
この構成を使った個人開発・学習サポートを MENTA で提供しています → https://menta.work/plan/20251
YouTubeでもAI駆動開発の情報を発信中 → https://www.youtube.com/channel/UC1rXVD9WYsQPQEWZyd-A1KA/