Next.js × Supabase × Vercelで始める個人開発【2026年版テンプレート付き】

なぜNext.js × Supabase × Vercelが最強スタックなのか

個人開発のスタック選びで重要なのは「技術的に優れているか」ではなく、「1人でリリースまで走り切れるか」です。 Next.js × Supabase × Vercelの組み合わせは、まさにその観点で最適解です。

受講生142名のデータが証明する「リリース率」の圧倒的な差

ShiftBの受講生142名の技術スタック別リリース率を見てください。

Next.js × Supabase × Vercelのリリース率84%は他スタック平均の2倍以上です。 この差が生まれる理由は明確で、「セットアップの速さ」「ドキュメントの充実度」 「AI（Claude Code / Cursor）との相性」の3つが揃っているからです。

AI駆動開発との圧倒的な相性

2026年の個人開発はAIツールとの相性が最重要です。 Claude CodeやCursorは、Next.jsとSupabaseのコードを極めて高い精度で生成できます。 なぜなら、学習データにNext.jsとSupabaseの組み合わせが大量に含まれているからです。

個人開発で求められる5つの要件をすべて満たす

個人開発のスタックには以下の5つの要件が必須です。 Next.js × Supabase × Vercelはこのすべてを満たす唯一のスタックです。

1. 無料枠が十分：MVP検証期間はコスト0円で運用可能
2. フルスタック対応：フロントエンド・バックエンド・DB・認証が1セットで完結
3. スケーラビリティ：ユーザー数が増えても設定変更だけで対応可能
4. 開発体験（DX）：ホットリロード・型安全・エラーメッセージが優秀
5. デプロイの簡単さ：git pushだけで自動デプロイ

3つのツールの役割と連携の仕組み

まずは3つのツールがそれぞれ何を担当し、どう連携するのかを理解しましょう。 この全体像を掴むことで、開発中に「何をどこに書けばいいか」が迷わなくなります。

Next.js——フロントエンドとAPIの統合フレームワーク

Next.jsはReactベースのフルスタックフレームワークです。個人開発では以下の理由で最適です。

• App Router：ファイルベースのルーティングでページ追加が簡単
• Server Components：サーバー側でデータ取得が完結し、パフォーマンスが高い
• Server Actions：API Routeを書かずにフォーム送信やDB操作ができる
• Image最適化：画像のリサイズ・WebP変換が自動
• SEO対応：SSR/SSGでメタタグが正しく出力される

特にServer ActionsはAPI Routeの80%を不要にします。 ShiftBの受講生でAPI Routeを大量に書いてしまい、管理が破綻するケースをよく見ますが、 Server Actionsを正しく使えばその心配はありません。

Supabase——バックエンドを丸ごと引き受けるBaaS

Supabaseは「オープンソースのFirebase代替」として急成長しているBaaS（Backend as a Service）です。 個人開発者にとって最大のメリットはバックエンド開発が実質不要になること。

SupabaseがFirebaseより個人開発に向いている最大の理由はPostgreSQLを使えることです。 SQLは学習リソースが豊富で、AIツールとの相性も抜群です。 FirestoreのNoSQLクエリに苦戦する受講生を何十人も見てきましたが、 Supabaseに切り替えた途端にスムーズに進むケースが非常に多いです。

Vercel——デプロイと配信のプラットフォーム

VercelはNext.jsの開発元が運営するホスティングプラットフォームです。 当然ながらNext.jsとの相性は完璧で、以下が自動化されます。

• 自動デプロイ：GitHubにpushするだけで本番反映
• プレビューデプロイ：PRごとに専用URLが発行される
• エッジネットワーク：世界中のCDNで高速配信
• Analytics：Core Web Vitalsのモニタリングが無料
• 環境変数管理：Development / Preview / Production を分離

ShiftBの受講生でAWS Amplifyを使って環境構築に3日かかった人が、 Vercelに切り替えたら30分で完了しました。 個人開発ではインフラに時間をかけるべきではありません。

3つの連携フロー

全体の連携は非常にシンプルです。

1. ユーザーがブラウザでNext.jsアプリにアクセス（Vercel経由）
2. Next.jsのServer ComponentsがSupabaseからデータを取得
3. 認証はSupabase Authが処理し、JWTトークンをCookieに保存
4. ファイルアップロードはSupabase Storageへ直接送信
5. コード変更をGitHubにpush → Vercelが自動デプロイ

個人開発テンプレートの全体構成

ここからは、ShiftBの受講生が実際に使っている個人開発テンプレートの全体構成を公開します。 このテンプレートは142名の開発経験をもとに最適化されたもので、「迷わない」「壊れにくい」「拡張しやすい」の3原則で設計されています。

ディレクトリ構成

以下がShiftB推奨のディレクトリ構成です。Next.js App Routerの規約に沿いながら、 個人開発で必要十分な粒度になっています。

my-app/
├── app/
│   ├── (auth)/           # 認証関連ページ
│   │   ├── login/
│   │   ├── signup/
│   │   └── callback/
│   ├── (dashboard)/      # ログイン後のページ
│   │   ├── layout.tsx    # 認証ガード付きレイアウト
│   │   ├── page.tsx      # ダッシュボード
│   │   └── settings/
│   ├── api/              # Webhook等のAPIルート
│   │   └── webhook/
│   ├── layout.tsx        # ルートレイアウト
│   └── page.tsx          # ランディングページ
├── components/
│   ├── ui/               # 汎用UIコンポーネント
│   └── features/         # 機能別コンポーネント
├── lib/
│   ├── supabase/
│   │   ├── client.ts     # ブラウザ用クライアント
│   │   ├── server.ts     # サーバー用クライアント
│   │   └── middleware.ts # 認証ミドルウェア
│   └── utils.ts
├── supabase/
│   ├── migrations/       # DBマイグレーション
│   └── seed.sql          # 初期データ
├── middleware.ts          # Next.jsミドルウェア
├── .env.local             # 環境変数
└── package.json

使用パッケージ一覧（必要最小限）

パッケージは「入れすぎない」のが鉄則です。 ShiftBのテンプレートでは依存パッケージを12個以内に抑えています。

よくある失敗：Redux、React Query、Prisma、NextAuth.js…… 初期段階で「念のため入れておこう」とパッケージを追加しすぎるケースです。 ShiftBの受講生データでは、初期パッケージが20個以上のプロジェクトのリリース率は42%に下がります。 理由はシンプルで、パッケージ間の依存関係やバージョン不整合でハマるからです。

良い構成と悪い構成の比較

個人開発で失敗する典型的な構成と、成功する構成を比較します。

セットアップ手順——0からデプロイまで60分

ここからは実際の手順を解説します。初めての人でも60分以内にデプロイまで完了できるように、 各ステップの所要時間も記載しています。

Step 1：プロジェクト作成（所要時間：5分）

まずはNext.jsプロジェクトを作成します。ターミナルで以下を実行してください。

# Next.jsプロジェクト作成
npx create-next-app@latest my-app --typescript --tailwind --eslint --app --src-dir=false

# プロジェクトに移動
cd my-app

オプションの選択肢は以下のとおりです。

• TypeScript：Yes（型安全はAIとの相性を大幅に向上させます）
• Tailwind CSS：Yes（CSSファイル管理が不要に）
• App Router：Yes（Pages Routerは2026年時点では非推奨）
• src/ ディレクトリ：No（個人開発ではシンプルな構成が有利）
• import alias：@/*（デフォルトのまま）

Step 2：Supabaseプロジェクト作成（所要時間：10分）

Supabaseのダッシュボードからプロジェクトを新規作成します。

1. Supabaseにサインアップ（GitHub認証が最速）
2. 「New Project」をクリック
3. プロジェクト名・パスワード・リージョンを設定（リージョンはNortheast Asia（Tokyo）を選択）
4. 「Create new project」をクリックして2分ほど待つ

プロジェクトが作成されたら、Settings → APIから以下の2つの値をコピーします。

• Project URL（例：https://xxxxx.supabase.co）
• anon key（public）

次に、Next.jsプロジェクトの.env.localに設定します。

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Step 3：Supabaseクライアント設定（所要時間：10分）

Supabaseとの接続に必要なパッケージをインストールし、クライアントを作成します。

npm install @supabase/supabase-js @supabase/ssr

ブラウザ用クライアント（lib/supabase/client.ts）：

import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

サーバー用クライアント（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() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

ポイント：ブラウザ用とサーバー用を分けるのが重要です。 これを1つにまとめてしまう受講生が多いですが、 Server Components内でブラウザ用クライアントを使うと認証トークンが正しく送信されないバグの原因になります。

Step 4：認証ミドルウェア設定（所要時間：10分）

Next.jsのミドルウェアでSupabaseの認証セッションを管理します。 これにより、すべてのリクエストで自動的にセッションがリフレッシュされます。

// middleware.ts
import { createServerClient } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  // 未ログインユーザーをログインページにリダイレクト
  if (!user && request.nextUrl.pathname.startsWith("/dashboard")) {
    const url = request.nextUrl.clone();
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
};

Step 5：Vercelにデプロイ（所要時間：10分）

いよいよデプロイです。Vercelへのデプロイは驚くほど簡単です。

1. コードをGitHubにpush
2. Vercelにサインアップ（GitHub認証）
3. 「Import Project」でリポジトリを選択
4. 環境変数（NEXT_PUBLIC_SUPABASE_URLとNEXT_PUBLIC_SUPABASE_ANON_KEY）を設定
5. 「Deploy」をクリック

これだけで本番環境が完成します。 以降はGitHubにpushするたびに自動デプロイが走り、 PRを作るとプレビューURLも自動発行されます。

Step 6：Supabase CLIの導入（所要時間：15分）

ローカル開発環境でDBのマイグレーション管理をするために、Supabase CLIを導入します。

# Supabase CLIインストール
npm install -D supabase

# プロジェクト初期化
npx supabase init

# ローカルSupabase起動（Docker必要）
npx supabase start

# マイグレーション作成例
npx supabase migration new create_profiles_table

マイグレーションファイルに以下のようなSQLを記述します。

-- supabase/migrations/xxxxx_create_profiles_table.sql
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  display_name TEXT,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- RLS（行レベルセキュリティ）を有効化
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

-- 自分のプロフィールのみ読み取り可能
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT
  USING (auth.uid() = id);

-- 自分のプロフィールのみ更新可能
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE
  USING (auth.uid() = id);

RLS（Row Level Security）は絶対にスキップしないでください。 ShiftBの受講生で、RLSを設定せずにリリースしてしまい、他のユーザーのデータが丸見えになっていたインシデントが実際にありました。 Supabaseのダッシュボードに「RLS disabled」の警告が出たら、必ず対応してください。

認証・データベース・ストレージの実装パターン

テンプレートのセットアップが完了したら、次は実際の機能実装です。 ここでは個人開発でほぼ100%必要になる3つの機能の実装パターンを紹介します。

認証：Google / GitHub OAuth（所要時間：15分）

メールアドレス＋パスワード認証も可能ですが、 個人開発ではOAuth（ソーシャルログイン）一択を推奨します。 理由は3つ。

1. ユーザーの離脱率が下がる：パスワード入力不要で登録のハードルが低い
2. セキュリティリスクが下がる：パスワードを保存しなくていい
3. 実装が圧倒的に簡単：Supabase側の設定だけでほぼ完結

ShiftBの受講生データでは、OAuth導入済みアプリの平均登録率は32%、 メールアドレス認証のみのアプリは18%でした。 約1.8倍の差がつきます。

// app/(auth)/login/page.tsx
"use client";

import { createClient } from "@/lib/supabase/client";

export default function LoginPage() {
  const supabase = createClient();

  const handleGoogleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: `${window.location.origin}/callback`,
      },
    });
  };

  return (
    <div className="flex min-h-screen items-center justify-center">
      <button
        onClick={handleGoogleLogin}
        className="rounded-lg bg-blue-600 px-6 py-3 text-white"
      >
        Googleでログイン
      </button>
    </div>
  );
}

データベース操作：Server Actionsパターン（所要時間：20分）

データベースのCRUD操作はServer Actionsで実装するのが2026年のベストプラクティスです。 API Routeを書く必要がなく、型安全・認証チェック・エラーハンドリングが 1ファイルで完結します。

// app/(dashboard)/actions.ts
"use server";

import { createClient } from "@/lib/supabase/server";
import { revalidatePath } from "next/cache";

export async function createTodo(formData: FormData) {
  const supabase = await createClient();

  const { data: { user } } = await supabase.auth.getUser();
  if (!user) throw new Error("認証が必要です");

  const title = formData.get("title") as string;

  const { error } = await supabase
    .from("todos")
    .insert({ title, user_id: user.id });

  if (error) throw new Error("作成に失敗しました");

  revalidatePath("/dashboard");
}

export async function deleteTodo(id: string) {
  const supabase = await createClient();

  const { error } = await supabase
    .from("todos")
    .delete()
    .eq("id", id);

  if (error) throw new Error("削除に失敗しました");

  revalidatePath("/dashboard");
}

ストレージ：画像アップロード（所要時間：15分）

ユーザーのプロフィール画像やファイルアップロードは、Supabase Storageを使います。 S3互換のAPIなので、将来的にAWSに移行する際もスムーズです。

// ファイルアップロードのユーティリティ
import { createClient } from "@/lib/supabase/client";

export async function uploadAvatar(file: File, userId: string) {
  const supabase = createClient();

  const fileExt = file.name.split(".").pop();
  const filePath = `avatars/${userId}.${fileExt}`;

  const { error } = await supabase.storage
    .from("avatars")
    .upload(filePath, file, { upsert: true });

  if (error) throw error;

  const { data } = supabase.storage
    .from("avatars")
    .getPublicUrl(filePath);

  return data.publicUrl;
}

注意点：Supabase Storageにもバケットレベルのアクセス制御があります。 公開バケット（publicUrl取得可能）とプライベートバケット（署名付きURL必要）を 適切に使い分けてください。プロフィール画像は公開、 個人文書などは非公開バケットが適切です。

収益化への拡張——Stripe決済の組み込み

MVPがリリースできたら、次は収益化です。 Next.js × Supabase × Vercelのスタックなら、Stripe決済の組み込みが驚くほどスムーズです。

なぜStripeなのか

個人開発の決済プラットフォームとしてStripeを推奨する理由は以下の4つです。

Stripe Checkoutで最速の決済実装

最もシンプルで安全な決済導入方法はStripe Checkoutです。 決済UIをStripeが用意してくれるため、 クレジットカード情報を自分のサーバーで扱う必要がありません。

// app/api/checkout/route.ts
import { NextResponse } from "next/server";
import Stripe from "stripe";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(request: Request) {
  const { priceId } = await request.json();

  const session = await stripe.checkout.sessions.create({
    mode: "subscription",
    payment_method_types: ["card"],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing`,
  });

  return NextResponse.json({ url: session.url });
}

Webhookでサブスクリプション状態を同期

Stripe Checkoutで決済が完了したら、Webhookを使って Supabaseのユーザーデータとサブスクリプション状態を同期します。この同期処理を忘れると、決済したのに機能が使えないというクレームの原因になります。

// app/api/webhook/route.ts
import { NextResponse } from "next/server";
import Stripe from "stripe";
import { createClient } from "@supabase/supabase-js";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY! // サービスロールキーを使用
);

export async function POST(request: Request) {
  const body = await request.text();
  const sig = request.headers.get("stripe-signature")!;

  const event = stripe.webhooks.constructEvent(
    body, sig, process.env.STRIPE_WEBHOOK_SECRET!
  );

  if (event.type === "checkout.session.completed") {
    const session = event.data.object;
    await supabase
      .from("subscriptions")
      .upsert({
        user_id: session.metadata?.user_id,
        stripe_subscription_id: session.subscription,
        status: "active",
      });
  }

  return NextResponse.json({ received: true });
}

収益化までのロードマップ

個人開発の収益化は焦る必要はありません。以下のステップで段階的に進めましょう。

1. 月0円期（0〜2ヶ月目）：無料版でユーザー獲得。100ユーザーを目標に
2. 月1万円期（3〜4ヶ月目）：有料プランを追加。月額980〜1,980円が個人開発の王道価格帯
3. 月5万円期（5〜8ヶ月目）：機能拡充＋マーケティング強化
4. 月10万円超（9ヶ月目〜）：年間プランの導入、法人向けプラン検討

ShiftBの受講生で月1万円以上の収益化に成功した23名の平均データでは、 リリースから収益化まで平均3.2ヶ月でした。 初速を出すにはSNSでの認知獲得が最も効果的です。

運用・コスト管理——月0円から始めるスケーリング戦略

「リリースしたけどサーバー代がかかりすぎて維持できない」—— これは個人開発あるあるの失敗パターンです。 Next.js × Supabase × Vercelなら、無料枠を最大限活用してコストを限りなくゼロに近づけることが可能です。

フェーズ別の月額コストシミュレーション

重要なポイント：MVP期は完全に0円で運用可能です。 収益が発生してからインフラコストが増えていく構造なので、赤字リスクが極めて低いのがこのスタックの最大の魅力です。

無料枠を最大限活用するための5つのTips

1. 画像は外部CDN（Cloudflare R2等）を使う： Supabase Storageの無料枠（1GB）はすぐに溢れます。 画像が多いサービスはCloudflare R2（10GB無料）を併用しましょう。
2. Vercelのサーバーレス関数のタイムアウトに注意： Hobbyプランは10秒、Proプランは60秒が上限です。 重い処理はバックグラウンドジョブに分離しましょう。
3. SupabaseのDB接続数を節約する： 無料枠は同時接続60。Server Componentsでの接続は自動で管理されるので問題ありませんが、 リアルタイム機能を使う場合は接続数を監視してください。
4. VercelのAnalyticsは無料枠で十分： Google Analyticsと併用する必要はありません。 Core Web Vitalsのモニタリングだけでなく、 ページビュー・ユーザー数も確認できます。
5. カスタムドメインは早めに取得：.devドメインなら年間約1,800円（月150円）で取得できます。 SEO的にも、ユーザーの信頼性的にも、独自ドメインは必須です。

個人開発者が陥りがちなコストの罠

ShiftBの受講生で実際にあったコスト関連のトラブルを紹介します。

モニタリング体制の構築

個人開発でも最低限のモニタリングは必要です。以下の3つを設定してください。

1. Vercel Analytics（無料）：ページビュー・Core Web Vitals
2. Supabase Dashboard（無料）：DB使用量・API呼び出し数
3. Sentry（無料枠あり）：エラートラッキング。 本番環境でのエラーを即座にSlack通知できます。

ShiftBの受講生でSentryを導入していた受講生の月間バグ対応時間は平均2時間、 未導入の受講生は平均8時間でした。 エラーの検知が遅れるほど、ユーザー離脱につながります。

よくある質問（FAQ）

Q1：プログラミング初心者でもこのスタックを使えますか？

はい、可能です。ただしHTML/CSS/JavaScriptの基礎知識は前提になります。 ShiftBでは「Progate → JavaScript基礎 → Next.jsチュートリアル」の順で学習を推奨しています。 最低限の基礎があれば、Claude CodeやCursorのAI支援を活用して 2週間程度でMVPをリリースできます。 実際、プログラミング歴3ヶ月の受講生が10日でリリースした事例もあります。

Q2：FirebaseからSupabaseに移行すべきですか？

すでにFirebaseで開発が進んでいるなら、無理に移行する必要はありません。 ただし、新規プロジェクトなら間違いなくSupabaseを推奨します。 理由は、PostgreSQLのSQL操作がAIツールと圧倒的に相性が良いことと、 RLS（行レベルセキュリティ）によるセキュリティ管理が直感的だからです。 ShiftBの受講生でFirebaseからSupabaseに移行した15名全員が「開発速度が上がった」と回答しています。

Q3：TypeScriptは必須ですか？JavaScriptじゃダメですか？

TypeScript強く推奨です。 2026年現在、AIツール（Claude Code、Cursor）は型情報を手がかりに より正確なコードを生成します。 TypeScriptを使うことでAIの生成精度が約30%向上するというのが ShiftBでの実感値です。 また、個人開発で「1ヶ月前の自分のコードが読めない」問題は 型があるだけで劇的に改善します。

Q4：Vercelの無料枠で十分ですか？いつProプランにすべきですか？

月間PVが5万を超えるまでは無料枠で十分です。 Vercel Hobbyプランでも、商用利用は禁止されていますが、 個人プロジェクトでの利用（個人の収益化を含む）は問題ありません。 ただし、チームでの利用やクライアントワークではProプラン（$20/月）が必要です。 ShiftBの受講生の90%以上がリリースから6ヶ月間は無料枠内で運用できています。

Q5：このスタックでモバイルアプリも作れますか？

PWA（Progressive Web App）として対応可能です。 Next.jsで構築したWebアプリをPWA化すれば、スマホのホーム画面に追加でき、 プッシュ通知も送れます。 ネイティブアプリが必要な場合はReact Native + Supabaseの組み合わせがありますが、まずはWeb版のMVPでユーザー検証を行い、 ニーズが確認できてからネイティブ化するのが個人開発の鉄則です。

Q6：Supabaseが将来サービス終了したらどうなりますか？

SupabaseはOSSなので、万が一サービスが終了してもセルフホスティングが可能です。 また、データベースは標準的なPostgreSQLなので、 他のPaaSやVPS（Railway、Render等）に比較的簡単に移行できます。 FirestoreのようなプロプライエタリなNoSQLと比べて、データポータビリティが高いのがSupabaseの隠れた強みです。

Q7：Claude Codeでこのテンプレートの開発を加速するコツは？

CLAUDE.mdに技術スタック情報を明記するのが最大のコツです。 「Next.js App Router + Supabase + Tailwind CSS + shadcn/ui」 と書いておくだけで、Claude Codeの生成コードの的中率が格段に上がります。 さらに、Supabaseのテーブル定義（SQL）をCLAUDE.mdに含めておくと、データ取得・更新のコードをほぼ完璧に生成してくれます。 詳しくは「CLAUDE.mdの書き方ガイド」を参照してください。