Supabase Boilerplate

GitHub Repository

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

Live Demo

デプロイ済みのデモを確認

概要

Next.js 15、React 19、Supabase、Drizzle ORM、Dodo Payments を使用した、本番環境対応のサブスクリプション用ボイラープレートです。Google OAuth、サブスクリプションのチェックアウト、webhook 処理、データベーススキーマ、基本的なダッシュボードがあらかじめ含まれています。

既存のアプリにルートハンドラーだけが必要な場合は、専用のアダプターを参照してください: Next.js Adaptor および Express Adaptor。

前提条件

Node.js 18+（または Bun 1.0+）
Supabase プロジェクト（URL、Anon key、Service role key、Database URL）
Dodo Payments アカウント（API key、Webhook secret）
Google Cloud OAuth クライアント（Client ID と Secret）

クイックスタート

Clone and install

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

Create Supabase project

Supabase プロジェクトを作成し、以下をコピーします:

NEXT_PUBLIC_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY
DATABASE_URL（Connection string）

Configure Google OAuth

Google Cloud でリダイレクト URI を https://[your-project-ref].supabase.co/auth/v1/callback に設定し、Client ID と Secret を使用して Supabase Auth で Google provider を有効にします。

Configure Dodo Payments

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

Create .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

シークレットをコミットしないでください。デプロイ環境では環境変数を使用します。

Provision database schema

bun run db:push
# or
npm run db:push
# or
pnpm run db:push

作成されるテーブル: users、subscriptions、payments。

Deploy webhook function

# 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":{}}'

Add webhook in Dodo Payments

エンドポイント URL を次に設定します:

https://[your-project-ref].supabase.co/functions/v1/dodo-webhook

支払いおよびサブスクリプション関連のイベントを選択します。

Create products and features

Dodo ダッシュボード → Products → Create Product の順に選択します。必要に応じてメタデータを追加します:

{
  "features": ["Feature 1", "Feature 2", "Feature 3"]
}

料金 UI はこの features 配列を読み込み、動的にレンダリングします。

Run the dev server

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 のままにしてください。

主要なファイルとパス

Edge Function
Next.js routes
Database (Drizzle)

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

app/(marketing)/*     # landing + pricing UI
app/(dashboard)/*     # protected pages
app/api/*             # server actions & helpers

lib/db/schema.ts      # users, subscriptions, payments
lib/db/index.ts       # client

環境変数

Supabase

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=

Dodo Payments

DODO_PAYMENTS_API_KEY=
DODO_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode|live_mode

Google OAuth

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

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

Webhook signature invalid (401)

DODO_WEBHOOK_SECRET が Dodo ダッシュボードの値と一致していることを確認します
最新の dodo-webhook function をデプロイしたことを確認します
function 内のヘッダー名（Dodo-Signature）が正しいことを確認します

Database push fails

DATABASE_URL の構文と Supabase のネットワーク egress を確認します
プロジェクト作成後、最初の push まで 2～3 分ほど待ちます

OAuth redirect mismatch

リダイレクト URI は https://[ref].supabase.co/auth/v1/callback である必要があります
Google Cloud と Supabase Auth provider の両方で同じ値になっていることを確認します

これで、Supabase と Dodo Payments を使った、動作するサブスクリプション SaaS の基盤が完成しました。

元のリポジトリと詳細な手順: dodo-supabase-subscription-starter。

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

概要

前提条件

クイックスタート

含まれる機能

主要なファイルとパス

環境変数

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

GitHub Repository

Live Demo

​概要

​前提条件

​クイックスタート

​含まれる機能

​主要なファイルとパス

​環境変数

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

概要

前提条件

クイックスタート

含まれる機能

主要なファイルとパス

環境変数

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