Next.js Minimal Boilerplate

​

نظرة عامة

​

الميزات

• إعداد سريع: انتقل من الاستنساخ إلى تشغيل صفحة التسعير في نحو خمس دقائق.
• Checkout: تدفق checkout مُعد مسبقًا مبني على @dodopayments/nextjs.
• صفحة التسعير: صفحة تسعير ذات سمة داكنة ومنسّقة باستخدام Tailwind CSS.
• معالج Webhook: نقطة نهاية تتحقق من توقيع كل webhook وتشغّل التعليمات البرمجية الخاصة بك للحدث.
• Customer Portal: رابط في الترويسة يفتح Customer Portal، حيث يدير العملاء اشتراكاتهم.
• TypeScript: تعريفات ومعالجات منتجات مكتوبة الأنواع.
• Checkout مُعبّأ مسبقًا: يمرّر اسم العميل وبريده الإلكتروني إلى checkout، حتى لا يضطر العميل إلى إدخالهما مرة أخرى.

​

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

• Node.js 20.9 أو أحدث، وهو الإصدار المطلوب من Next.js 16.
• حساب Dodo Payments، لإنشاء مفتاح API وسر توقيع webhook من لوحة التحكم.

​

البدء السريع

git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate

npm install

cp .env.example .env

DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode

export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];

npm run dev

​

بنية المشروع

src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions

​

التخصيص

​

تحديث معلومات المنتج

• معرّفات المنتجات، من المنتجات في لوحة تحكم Dodo Payments
• الأسعار
• الميزات
• الأوصاف

​

تعبئة بيانات العميل مسبقًا

customer: {
  name: "John Doe",
  email: "john@example.com",
},

​

تحديث Customer Portal

const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID

​

أحداث Webhook

• يُشغّل onSubscriptionActive عند تنشيط اشتراك (subscription.active).
• يُشغّل onPaymentSucceeded عند نجاح دفعة (payment.succeeded).

onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},

​

النشر

​

الإنشاء للإنتاج

npm run build
npm start

​

النشر إلى Vercel

​

تحديث عنوان URL لـ Webhook

https://example.com/api/webhook

​

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

rm -rf node_modules package-lock.json
npm install

ngrok http 3000

​

تعلّم المزيد

• وثائق Dodo Payments
• وثائق Checkout Sessions
• وثائق Webhooks
• محوّل Next.js: خيارات معالجات Checkout وCustomerPortal وWebhooks

​

الدعم

• اطرح أسئلتك في مجتمع Discord.
• أبلغ عن المشكلات وتابع التحديثات في مستودع GitHub.
• أرسل بريدًا إلكترونيًا إلى فريق الدعم.