يعد هذا نموذجًا أوليًا لإنشاء تطبيق SaaS باستخدام Next.js مع دعم المصادقة وتكامل Stripe للمدفوعات ولوحة معلومات للمستخدمين الذين قاموا بتسجيل الدخول.
العرض التوضيحي: https://next-saas-start.vercel.app/
في عام 2020، قمت بإعداد دورة تدريبية بعنوان "React 2025" والتي أظهرت كيفية إنشاء تطبيق SaaS باستخدام Next.js وStripe وأدوات أخرى.
حسنًا، لقد اقترب عام 2025 وقد جلب React 19 الكثير من الميزات الجديدة المذهلة التي لم أتوقعها! يعد هذا الريبو عرضًا لأحدث أنماط React وNext.js. يمكن لهذه الأنماط أن تبسط بشكل كبير بعض المهام الشائعة في بناء SaaS، مثل إنشاء النماذج والتحدث إلى قاعدة البيانات الخاصة بك والمزيد.
على سبيل المثال، قامت React الآن ببناء خطافات مثل useActionState للتعامل مع أخطاء النماذج المضمنة والحالات المعلقة. يمكن أن تحل إجراءات React Server محل الكثير من التعليمات البرمجية المعيارية اللازمة لاستدعاء مسار API من جانب العميل. وأخيرًا، يجعل ربط React use مع Next.js من السهل جدًا إنشاء خطاف useUser() قوي.
نحن قادرون على جلب المستخدم من قاعدة بيانات Postgres الخاصة بنا في تخطيط الجذر، ولكن لا ننتظر Promise . بدلًا من ذلك، نعيد توجيه Promise إلى موفر سياق React، حيث يمكننا "فك تغليفه" وانتظار البيانات المتدفقة. هذا يعني أنه يمكننا الحصول على أفضل ما في العالمين: كود سهل لجلب البيانات من قاعدة البيانات الخاصة بنا (على سبيل المثال getUser() ) وخطاف React يمكننا استخدامه في مكونات العميل (على سبيل المثال useUser() ).
حقيقة ممتعة: تم إنشاء غالبية واجهة المستخدم لهذا التطبيق باستخدام الإصدار 0؟ مزيد من التفاصيل هنا إذا كنت تريد التعرف على هذا الريبو.
/ ) مع عنصر طرفي متحرك/pricing ) التي تتصل بـ Stripe Checkoutgit clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install استخدم برنامج الإعداد المضمن لإنشاء ملف .env الخاص بك:
pnpm db:setupبعد ذلك، قم بتشغيل عمليات ترحيل قاعدة البيانات وزرع قاعدة البيانات باستخدام مستخدم وفريق افتراضيين:
pnpm db:migrate
pnpm db:seedسيؤدي هذا إلى إنشاء المستخدم والفريق التاليين:
[email protected]admin123 يمكنك بالطبع إنشاء مستخدمين جدد أيضًا من خلال /sign-up .
وأخيرًا، قم بتشغيل خادم تطوير Next.js:
pnpm devافتح http://localhost:3000 في متصفحك لرؤية التطبيق أثناء العمل.
اختياريًا، يمكنك الاستماع إلى خطافات الويب الخاصة بـ Stripe محليًا من خلال واجهة سطر الأوامر الخاصة بها للتعامل مع أحداث تغيير الاشتراك:
stripe listen --forward-to localhost:3000/api/stripe/webhookلاختبار مدفوعات Stripe، استخدم تفاصيل بطاقة الاختبار التالية:
4242 4242 4242 4242عندما تكون جاهزًا لنشر تطبيق SaaS الخاص بك إلى الإنتاج، اتبع الخطوات التالية:
https://yourdomain.com/api/stripe/webhook ).checkout.session.completed ، customer.subscription.updated ).في إعدادات مشروع Vercel (أو أثناء النشر)، قم بإضافة كافة متغيرات البيئة الضرورية. تأكد من تحديث القيم الخاصة ببيئة الإنتاج، بما في ذلك:
BASE_URL : قم بتعيين هذا على مجال الإنتاج الخاص بك.STRIPE_SECRET_KEY : استخدم مفتاح Stripe السري لبيئة الإنتاج.STRIPE_WEBHOOK_SECRET : استخدم سر webhook من webhook الإنتاج الذي قمت بإنشائه في الخطوة 1.POSTGRES_URL : قم بتعيين هذا على عنوان URL لقاعدة بيانات الإنتاج الخاصة بك.AUTH_SECRET : اضبط هذا على سلسلة عشوائية. سوف يقوم openssl rand -base64 32 بإنشاء واحد. على الرغم من أن هذا القالب صغير الحجم عن قصد ويمكن استخدامه كمصدر تعليمي، إلا أن هناك إصدارات مدفوعة أخرى في المجتمع تتميز بميزات أكثر:
