メインコンテンツへスキップ

GitHub リポジトリ

最小限の Next.js + Supabase + Dodo Payments サブスクリプションボイラープレート

ライブデモ

デプロイされたデモを探索

​
概要

Next.js 15、React 19、Supabase、Drizzle ORM、および Dodo Payments を使用した、プロダクション対応のサブスクリプションボイラープレートです。Google OAuth、サブスクリプションチェックアウト、Webhook ハンドリング、データベーススキーマ、および基本的なダッシュボードが付属しています。
既存のアプリのルートハンドラーのみが必要な場合は、専用のアダプターを参照してください: Next.js アダプター と Express アダプター。

​
前提条件

  • Node.js 18+ (または Bun 1.0+)
  • Supabase プロジェクト (URL、Anon キー、サービスロールキー、データベース URL)
  • Dodo Payments アカウント (API キー、Webhook シークレット)
  • Google Cloud OAuth クライアント (クライアント ID とシークレット)

​
クイックスタート

1

クローンしてインストール

git clone https://github.com/dodopayments/dodo-supabase-subscription-starter.git
cd dodo-supabase-subscription-starter
# choose one
bun install
# or
npm install
# or
pnpm install
2

Supabase プロジェクトを作成

Supabase プロジェクトを作成し、以下をコピーします:
  • NEXT_PUBLIC_SUPABASE_URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY
  • SUPABASE_SERVICE_ROLE_KEY
  • DATABASE_URL (接続文字列)
3

Google OAuth を設定

リダイレクト URI を: https://[your-project-ref].supabase.co/auth/v1/callback に設定し、次に Supabase Auth で Google プロバイダーを有効にします。クライアント ID とシークレットを使用します。
4

Dodo Payments を設定

Dodo ダッシュボードから API キーと Webhook シークレットを生成します。開発中は環境を test_mode に設定します。
5

.env.local を作成

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role

# Database
DATABASE_URL=postgresql://postgres:[password]@db.[project-ref].supabase.co:5432/postgres

# Dodo Payments
DODO_PAYMENTS_API_KEY=your-dodo-api-key
DODO_WEBHOOK_SECRET=your-webhook-secret
DODO_PAYMENTS_ENVIRONMENT=test_mode
シークレットをコミットしないでください。デプロイ環境では環境変数を使用してください。
6

データベーススキーマをプロビジョニング

bun run db:push
# or
npm run db:push
# or
pnpm run db:push
作成されたテーブル: users, subscriptions, payments.
7

Webhook 関数をデプロイ

# login (one-time)
bunx supabase login
# or
npx supabase login

# deploy the edge function
bun run deploy:webhook --project-ref [your-project-ref]
# or
npm run deploy:webhook -- --project-ref [your-project-ref]
# or
pnpm run deploy:webhook --project-ref [your-project-ref]
cURL
curl -X POST \
  'https://[your-project-ref].supabase.co/functions/v1/dodo-webhook' \
  -H 'Content-Type: application/json' \
  -H 'Dodo-Signature: <signature>' \
  -d '{"type":"payment.succeeded","data":{}}'
8

Dodo Payments に Webhook を追加

エンドポイント URL を次のように設定します:
https://[your-project-ref].supabase.co/functions/v1/dodo-webhook
支払いおよびサブスクリプションイベントを選択します。
9

製品と機能を作成

Dodo ダッシュボード → 製品 → 製品を作成。オプションでメタデータを追加します:
{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}
価格 UI はこの features 配列を読み取り、動的にレンダリングします。
10

開発サーバーを実行

bun run dev
# or
npm run dev
# or
pnpm run dev
http://localhost:3000 を開きます。

​
含まれているもの

  • Supabase を介した認証 (Google OAuth が設定済み)
  • Dodo Payments を介したサブスクリプションチェックアウト
  • Webhook 用の Supabase エッジ関数 (dodo-webhook)
  • Drizzle ORM スキーマとマイグレーション
  • 請求書、サブスクリプションステータス、およびプラン機能を持つダッシュボード
DODO_PAYMENTS_ENVIRONMENT を test_mode のままにして、エンドツーエンドテストを完了するまで待ってください。

​
主要なファイルとパス

supabase/functions/dodo-webhook/
  index.ts            # webhook handler verifying signatures
  deno.json           # permissions

​
環境変数

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

​
検証とトラブルシューティング

  • DODO_WEBHOOK_SECRET が Dodo ダッシュボードの値と一致していることを確認してください
  • 最新の dodo-webhook 関数をデプロイしたことを確認してください
  • 関数内のヘッダー名が正しいことを確認してください (Dodo-Signature)
  • DATABASE_URL 構文と Supabase ネットワークエグレスを確認してください
  • プロジェクト作成後、最初のプッシュまでに約 2～3 分待ってください
  • リダイレクト URI は https://[ref].supabase.co/auth/v1/callback である必要があります
  • Google Cloud と Supabase Auth プロバイダーで同じであることを確認してください
Supabase と Dodo Payments で構築された動作するサブスクリプション SaaS ができました。
元のリポジトリと詳細な手順: dodo-supabase-subscription-starter。