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

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をGoogle Cloudでhttps://[your-project-ref].supabase.co/auth/v1/callbackに設定し、次にSupabase AuthでクライアントIDとシークレットを使用してGoogleプロバイダーを有効にします。
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 Edge Function (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。