قالب Supabase الجاهز

GitHub Repository

قالب اشتراكات بسيط لـ Next.js + Supabase + Dodo Payments

Live Demo

استكشف العرض التجريبي المنشور

نظرة عامة

قالب جاهز للاستخدام في بيئة الإنتاج للاشتراكات باستخدام 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، ومفتاح Service role، وURL قاعدة البيانات)
حساب Dodo Payments (مفتاح API، وسر Webhook)
عميل Google Cloud OAuth (معرّف العميل والسر)

البدء السريع

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 (سلسلة الاتصال)

Configure Google OAuth

اضبط URI إعادة التوجيه على: https://[your-project-ref].supabase.co/auth/v1/callback في Google Cloud، ثم فعّل موفّر Google في Supabase Auth باستخدام معرّف العميل والسر.

Configure Dodo Payments

أنشئ مفتاح API وسر Webhook من لوحة تحكم Dodo. اضبط البيئة على 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

اضبط عنوان endpoint على:

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"]
}

تقرأ واجهة التسعير مصفوفة features هذه وتعرضها ديناميكيًا.

Run the dev server

bun run dev
# or
npm run dev
# or
pnpm run dev

افتح http://localhost:3000.

ما يتضمنه القالب

المصادقة عبر Supabase (تم إعداد Google OAuth)
إتمام الدفع للاشتراكات عبر Dodo Payments
Supabase Edge Function لمعالجة webhooks (dodo-webhook)
مخطط Drizzle ORM وعمليات الترحيل
لوحة تحكم تتضمن الفواتير، وحالة الاشتراك، وميزات الخطة

أبقِ DODO_PAYMENTS_ENVIRONMENT مضبوطًا على test_mode حتى تُكمل اختبارات end-to-end.

الملفات والمسارات الرئيسية

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
تحقّق من صحة اسم الرأس في دالتك (Dodo-Signature)

Database push fails

تحقّق من بنية DATABASE_URL ومن خروج شبكة Supabase
انتظر نحو دقيقتين إلى 3 دقائق بعد إنشاء المشروع قبل أول push

OAuth redirect mismatch

يجب أن يكون URI إعادة التوجيه هو https://[ref].supabase.co/auth/v1/callback
تأكد من استخدام القيمة نفسها في Google Cloud وموفّر Supabase Auth

أصبح لديك الآن هيكل SaaS عملي للاشتراكات مبني باستخدام Supabase وDodo Payments.

المستودع الأصلي والخطوات التفصيلية: dodo-supabase-subscription-starter.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

GitHub Repository

Live Demo

نظرة عامة

المتطلبات الأساسية

البدء السريع

ما يتضمنه القالب

الملفات والمسارات الرئيسية

متغيرات البيئة

التحقق واستكشاف الأخطاء وإصلاحها

GitHub Repository

Live Demo

​نظرة عامة

​المتطلبات الأساسية

​البدء السريع

​ما يتضمنه القالب

​الملفات والمسارات الرئيسية

​متغيرات البيئة

​التحقق واستكشاف الأخطاء وإصلاحها

نظرة عامة

المتطلبات الأساسية

البدء السريع

ما يتضمنه القالب

الملفات والمسارات الرئيسية

متغيرات البيئة

التحقق واستكشاف الأخطاء وإصلاحها