تنزيل SaaS Boilerplate - تنزيل كود مصدر SaaS Boilerplate

SaaS Boilerplate

شفرة المصدر الأخرى

v1.7.3

تنزيل

نموذج SaaS مجاني ومفتوح المصدر مع Tailwind CSS وShadcn UI

قالب Next.js SaaS

يعد SaaS Boilerplate قالبًا قويًا وقابلاً للتخصيص بالكامل لبدء تشغيل تطبيقات SaaS الخاصة بك. تم تصميمه باستخدام Next.js و Tailwind CSS ومكونات واجهة المستخدم المعيارية لـ Shadcn UI . يساعدك قالب Next.js SaaS هذا على إنشاء SaaS وتشغيله بسرعة وبأقل جهد.

مليئة بالميزات الأساسية مثل المصادقة المضمنة، وتعدد الإيجارات مع دعم الفريق، والدور والإذن ، وقاعدة البيانات، وI18n (التدويل)، والصفحة المقصودة، ولوحة تحكم المستخدم، ومعالجة النماذج، وتحسين محركات البحث، والتسجيل، والإبلاغ عن الأخطاء باستخدام Sentry، والاختبار، والنشر والمراقبة وانتحال هوية المستخدم ، يوفر قالب SaaS هذا كل ما تحتاجه للبدء.

تم تصميم Next.js Starter Kit مع أخذ المطورين في الاعتبار، حيث يستخدم TypeScript لضمان أمان الكتابة ويدمج ESLint للحفاظ على جودة التعليمات البرمجية، إلى جانب Prettier لتنسيق التعليمات البرمجية المتسق. تجمع مجموعة الاختبار بين مكتبة اختبار Vitest وReact لإجراء اختبار قوي للوحدة، بينما يتعامل Playwright مع التكامل واختبار E2E. تتم إدارة التكامل والنشر المستمر عبر GitHub Actions. لإدارة المستخدم، تتم معالجة المصادقة بواسطة Clerk. بالنسبة لعمليات قاعدة البيانات، فإنه يستخدم Drizzle ORM لإدارة قواعد البيانات الآمنة عبر قواعد البيانات الشائعة مثل PostgreSQL وSQLite وMySQL.

سواء كنت تقوم بإنشاء تطبيق SaaS جديد أو تبحث عن قالب SaaS مرن وجاهز للإنتاج ، فإن هذا النموذج المعياري يغطي احتياجاتك. تحتوي مجموعة الأدوات المجانية مفتوحة المصدر هذه على كل ما تحتاجه لتسريع عملية تطوير منتجك وتوسيع نطاقه بسهولة.

انسخ هذا المشروع واستخدمه لإنشاء SaaS الخاص بك. يمكنك التحقق من العرض التوضيحي المباشر على SaaS Boilerplate، وهو عرض توضيحي يحتوي على مصادقة فعالة ونظام متعدد الإيجارات.

الرعاة



أضف شعارك هنا

تجريبي

العرض المباشر: SaaS Boilerplate

الصفحة المقصودة	لوحة تحكم المستخدم

إدارة الفريق	ملف تعريف المستخدم

اشتراك	تسجيل الدخول

الصفحة المقصودة مع الوضع الداكن (الإصدار المحترف)	لوحة تحكم المستخدم مع الوضع الداكن (الإصدار الاحترافي)

لوحة تحكم المستخدم مع الشريط الجانبي (الإصدار الاحترافي)

سمات

تجربة المطور أولاً، بنية تعليمات برمجية مرنة للغاية وتحتفظ فقط بما تحتاجه:

⚡ Next.js مع دعم App Router
التحقق من النوع TypeScript
؟ التكامل مع Tailwind CSS وShadcn UI
✅ الوضع الصارم لـ TypeScript و React 18
المصادقة مع Clerk: التسجيل، تسجيل الدخول، تسجيل الخروج، نسيت كلمة المرور، إعادة تعيين كلمة المرور، والمزيد.
؟ المصادقة بدون كلمة مرور باستخدام الروابط السحرية، والمصادقة متعددة العوامل (MFA)، والمصادقة الاجتماعية (Google، وFacebook، وTwitter، وGitHub، وApple، والمزيد)، وتسجيل الدخول بدون كلمة مرور باستخدام مفاتيح المرور، وانتحال شخصية المستخدم
تعدد الإيجارات ودعم الفريق: إنشاء المؤسسة وتبديلها وتحديثها ودعوة أعضاء الفريق
التحكم في الوصول والأذونات المستندة إلى الدور
؟ المصادقة متعددة العوامل (MFA)، والمصادقة الاجتماعية (Google، وFacebook، وTwitter، وGitHub، وApple، والمزيد)، وانتحال شخصية المستخدم
؟ ORM آمن النوع مع DrizzleORM، متوافق مع PostgreSQL وSQLite وMySQL
؟ قاعدة بيانات التطوير المحلية وغير المتصلة بالإنترنت باستخدام PGlite
متعدد اللغات (i18n) مع next-intl وCrowdin
♻️ متغيرات البيئة الآمنة من النوع مع T3 Env
⌨️ النموذج باستخدام نموذج React Hook
؟ مكتبة التحقق من الصحة مع Zod
؟ Linter مع ESLint (التكوين الافتراضي لـ NextJS وNextJS Core Web Vitals وTailwind CSS وAntfu)
؟ منسق الكود مع أجمل
؟ أجش لجيت هوكس
تم تنظيم الوبر لتشغيل linters على ملفات Git المرحلية
؟ Lint git الالتزام مع Commitlint
؟ اكتب رسائل التزام متوافقة مع المعايير باستخدام Commitizen
؟ اختبار الوحدة باستخدام مكتبة اختبار Vitest وReact
؟ التكامل واختبار E2E مع الكاتب المسرحي
؟ قم بإجراء اختبارات على طلبات السحب باستخدام إجراءات GitHub
؟ القصص المصورة لتطوير واجهة المستخدم
مراقبة الأخطاء مع Sentry
☂️تغطية الكود ببرنامج Codecov
التسجيل باستخدام Pino.js وإدارة السجل باستخدام Better Stack
المراقبة كرمز مع Checkly
؟ إنشاء سجل التغيير التلقائي مع الإصدار الدلالي
؟ الاختبار البصري مع بيرسي (اختياري)
الواردات المطلقة باستخدام البادئة @
؟ تكوين VSCode: التصحيح والإعدادات والمهام والإضافات
؟ البيانات التعريفية لتحسين محركات البحث وعلامات JSON-LD وOpen Graph
️ Sitemap.xml و robots.txt
⌘ استكشاف قاعدة البيانات باستخدام أداة ترحيل Drizzle Studio وCLI باستخدام Drizzle Kit
محلل الحزم
؟ قم بتضمين سمة بسيطة مجانية
؟ تعظيم نقاط المنارة

الميزة المضمنة من Next.js:

☕ تصغير HTML وCSS
؟ إعادة تحميل مباشر
✅ خرق ذاكرة التخزين المؤقت

فلسفة

لا شيء مخفي عنك، مما يسمح لك بإجراء أي تعديلات ضرورية لتناسب متطلباتك وتفضيلاتك.
يتم تحديث التبعيات كل شهر
ابدأ مجانًا دون تكاليف مقدمة
من السهل التخصيص
رمز الحد الأدنى
صديقة لكبار المسئولين الاقتصاديين
كل ما تحتاجه لبناء SaaS
جاهز للإنتاج

متطلبات

Node.js 20+ وnpm

ابدء

قم بتشغيل الأمر التالي في بيئتك المحلية:

git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm install

لمعلوماتك، يتم تحديث كافة التبعيات كل شهر.

بعد ذلك، يمكنك تشغيل المشروع محليًا في وضع التطوير مع إعادة التحميل المباشر عن طريق تنفيذ:

npm run dev

افتح http://localhost:3000 باستخدام متصفحك المفضل لرؤية مشروعك.

قم بإعداد المصادقة

قم بإنشاء حساب Clerk على Clerk.com وقم بإنشاء تطبيق جديد في Clerk Dashboard. بعد ذلك، انسخ قيم NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY و CLERK_SECRET_KEY إلى ملف .env.local (الذي لا يتم تتبعه بواسطة Git):

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key

في لوحة تحكم Clerk، تحتاج أيضًا إلى Enable Organization من خلال الانتقال إلى Organization management > Settings > Enable organization .

الآن، لديك نظام مصادقة يعمل بشكل كامل مع Next.js: الاشتراك، تسجيل الدخول، تسجيل الخروج، نسيت كلمة المرور، إعادة تعيين كلمة المرور، تحديث الملف الشخصي، تحديث كلمة المرور، تحديث البريد الإلكتروني، حذف الحساب، والمزيد.

إعداد قاعدة بيانات عن بعد

يستخدم المشروع DrizzleORM، وهو ORM آمن النوع ومتوافق مع قواعد بيانات PostgreSQL وSQLite وMySQL. افتراضيًا، يتم إعداد المشروع للعمل بسلاسة مع PostgreSQL ويمكنك بسهولة اختيار أي مزود قاعدة بيانات PostgreSQL.

إعداد الترجمة (i18n).

للترجمة، يستخدم المشروع next-intl مع Crowdin. كمطور، ما عليك سوى الاهتمام بالإصدار الإنجليزي (أو أي لغة افتراضية أخرى). يتم إنشاء الترجمات للغات الأخرى ومعالجتها تلقائيًا بواسطة Crowdin. يمكنك استخدام Crowdin للتعاون مع فريق الترجمة الخاص بك أو ترجمة الرسائل بنفسك بمساعدة الترجمة الآلية.

لإعداد الترجمة (i18n)، أنشئ حسابًا على Crowdin.com وأنشئ مشروعًا جديدًا. في المشروع الذي تم إنشاؤه حديثًا، ستتمكن من العثور على معرف المشروع. ستحتاج أيضًا إلى إنشاء رمز وصول شخصي جديد بالانتقال إلى إعدادات الحساب > واجهة برمجة التطبيقات. بعد ذلك، في إجراءات GitHub، تحتاج إلى تحديد متغيرات البيئة التالية: CROWDIN_PROJECT_ID و CROWDIN_PERSONAL_TOKEN .

بعد تحديد متغيرات البيئة في إجراءات GitHub، ستتم مزامنة ملفات الترجمة الخاصة بك مع Crowdin في كل مرة تدفع فيها التزامًا جديدًا إلى الفرع main .

هيكل المشروع

 .
├── README.md                       # README file
├── .github                         # GitHub folder
├── .husky                          # Husky configuration
├── .storybook                      # Storybook folder
├── .vscode                         # VSCode configuration
├── migrations                      # Database migrations
├── public                          # Public assets folder
├── scripts                         # Scripts folder
├── src
│   ├── app                         # Next JS App (App Router)
│   ├── components                  # Reusable components
│   ├── features                    # Components specific to a feature
│   ├── libs                        # 3rd party libraries configuration
│   ├── locales                     # Locales folder (i18n messages)
│   ├── models                      # Database models
│   ├── styles                      # Styles folder
│   ├── templates                   # Templates folder
│   ├── types                       # Type definitions
│   └── utils                       # Utilities folder
├── tests
│   ├── e2e                         # E2E tests, also includes Monitoring as Code
│   └── integration                 # Integration tests
├── tailwind.config.js              # Tailwind CSS configuration
└── tsconfig.json                   # TypeScript configuration

التخصيص

يمكنك بسهولة تكوين Next.js SaaS Boilerplate من خلال البحث في المشروع بأكمله عن FIXME: لإجراء التخصيص السريع. فيما يلي بعض أهم الملفات التي يجب تخصيصها:

public/apple-touch-icon.png و public/favicon.ico و public/favicon-16x16.png و public/favicon-32x32.png : الرمز المفضل لموقع الويب الخاص بك
src/utils/AppConfig.ts : ملف التكوين
src/templates/BaseTemplate.tsx : السمة الافتراضية
next.config.mjs : تكوين Next.js
.env : متغيرات البيئة الافتراضية

لديك حق الوصول الكامل إلى الكود المصدري لمزيد من التخصيص. الكود المقدم هو مجرد مثال لمساعدتك في بدء مشروعك. السماء هي الحد .

ستجد أيضًا في الكود المصدري تعليقات PRO التي تشير إلى الكود المتوفر فقط في إصدار PRO. يمكنك بسهولة إزالة هذا الرمز أو استبداله بالتنفيذ الخاص بك.

تغيير مخطط قاعدة البيانات

لتعديل مخطط قاعدة البيانات في المشروع، يمكنك تحديث ملف المخطط الموجود في ./src/models/Schema.ts . يحدد هذا الملف بنية جداول قاعدة البيانات الخاصة بك باستخدام مكتبة Drizzle ORM.

بعد إجراء تغييرات على المخطط، قم بإنشاء عملية ترحيل عن طريق تشغيل الأمر التالي:

npm run db:generate

سيؤدي هذا إلى إنشاء ملف ترحيل يعكس تغييرات المخطط الخاص بك. يتم تطبيق الترحيل تلقائيًا أثناء تفاعل قاعدة البيانات التالي، لذلك ليست هناك حاجة لتشغيله يدويًا أو إعادة تشغيل خادم Next.js.

الالتزام بتنسيق الرسالة

يتبع المشروع مواصفات الالتزامات التقليدية، مما يعني أنه يجب تنسيق جميع رسائل الالتزام وفقًا لذلك. لمساعدتك في كتابة رسائل الالتزام، يستخدم المشروع Commitizen، وهو واجهة سطر الأوامر (CLI) التفاعلية التي ترشدك خلال عملية الالتزام. لاستخدامه، قم بتشغيل الأمر التالي:

npm run commit

إحدى فوائد استخدام الالتزامات التقليدية هي القدرة على إنشاء ملف CHANGELOG تلقائيًا. كما يسمح لنا أيضًا بتحديد رقم الإصدار التالي تلقائيًا استنادًا إلى أنواع الالتزامات المضمنة في الإصدار.

دفع الاشتراك مع Stripe

المشروع متكامل مع Stripe لدفع الاشتراكات. تحتاج إلى إنشاء حساب Stripe وتحتاج أيضًا إلى تثبيت Stripe CLI. بعد تثبيت Stripe CLI، تحتاج إلى تسجيل الدخول باستخدام CLI:

stripe login

وبعد ذلك، يمكنك تشغيل الأمر التالي لإنشاء سعر جديد:

npm run stripe:setup-price

بعد تشغيل الأمر، تحتاج إلى نسخ معرف السعر ولصقه في src/utils/AppConfig.ts عن طريق تحديث معرف السعر الحالي بالمعرف الجديد.

في لوحة تحكم Stripe الخاصة بك، يُطلب منك تكوين إعدادات بوابة العميل الخاصة بك على https://dashboard.stripe.com/test/settings/billing/portal. والأهم من ذلك، تحتاج إلى حفظ الإعدادات.

في ملف .env الخاص بك، تحتاج إلى تحديث NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY باستخدام مفتاح Stripe القابل للنشر الخاص بك. يمكنك العثور على المفتاح في لوحة معلومات Stripe الخاصة بك. بعد ذلك، تحتاج أيضًا إلى إنشاء ملف جديد باسم .env.local وإضافة متغيرات البيئة التالية في الملف الذي تم إنشاؤه حديثًا:

STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

يمكنك الحصول على STRIPE_SECRET_KEY من لوحة تحكم Stripe الخاصة بك. يتم إنشاء STRIPE_WEBHOOK_SECRET عن طريق تشغيل الأمر التالي:

npm run dev

ستجد في جهازك الطرفي سر توقيع webhook. يمكنك نسخه ولصقه في ملف .env.local الخاص بك.

اختبار

توجد جميع اختبارات الوحدات بجانب الكود المصدري في نفس الدليل، مما يسهل العثور عليها. يستخدم المشروع مكتبة اختبار Vitest و React لاختبار الوحدة. يمكنك إجراء الاختبارات باستخدام الأمر التالي:

npm run test

التكامل واختبار E2E

يستخدم المشروع Playwright للتكامل والاختبار الشامل (E2E). يمكنك إجراء الاختبارات باستخدام الأوامر التالية:

npx playwright install # Only for the first time in a new environment
npm run test:e2e

في البيئة المحلية، يتم تعطيل الاختبار المرئي، وستعرض الوحدة الطرفية الرسالة [percy] Percy is not running, disabling snapshots. . افتراضيًا، يتم تشغيل الاختبار المرئي فقط في إجراءات GitHub.

تمكين وقت تشغيل Edge (اختياري)

مجلد App Router متوافق مع وقت تشغيل Edge. يمكنك تمكينه عن طريق إضافة الأسطر التالية src/app/layouts.tsx :

 export const runtime = 'edge' ;

لمعلوماتك، فإن ترحيل قاعدة البيانات غير متوافق مع وقت تشغيل Edge. لذلك، تحتاج إلى تعطيل الترحيل التلقائي في src/libs/DB.ts :

 await migrate ( db , { migrationsFolder : './migrations' } ) ;

بعد تعطيله، سيطلب منك تشغيل الترحيل يدويًا باستخدام:

npm run db:migrate

تحتاج أيضًا إلى تشغيل الأمر في كل مرة تريد فيها تحديث مخطط قاعدة البيانات.

نشر إلى الإنتاج

أثناء عملية الإنشاء، يتم تنفيذ عمليات ترحيل قاعدة البيانات تلقائيًا، لذلك ليست هناك حاجة لتشغيلها يدويًا. ومع ذلك، يجب عليك تحديد DATABASE_URL في متغيرات البيئة الخاصة بك.

بعد ذلك، يمكنك إنشاء نسخة إنتاجية باستخدام:

$ npm run build

إنه يولد بنية إنتاجية مثالية للوحة المعيارية. لاختبار البنية التي تم إنشاؤها، قم بتشغيل:

$ npm run start

تحتاج أيضًا إلى تحديد متغيرات البيئة CLERK_SECRET_KEY باستخدام المفتاح الخاص بك.

يبدأ هذا الأمر خادمًا محليًا باستخدام بنية الإنتاج. يمكنك الآن فتح http://localhost:3000 في متصفحك المفضل لرؤية النتيجة.

مراقبة الأخطاء

يستخدم المشروع Sentry لمراقبة الأخطاء. في بيئة التطوير، ليست هناك حاجة إلى أي إعداد إضافي: تم تكوين NextJS SaaS Boilerplate مسبقًا لاستخدام Sentry وSpotlight (Sentry for Development). سيتم إرسال جميع الأخطاء تلقائيًا إلى مثيل Spotlight المحلي الخاص بك، مما يسمح لك بتجربة Sentry محليًا.

بالنسبة لبيئة الإنتاج، ستحتاج إلى إنشاء حساب Sentry ومشروع جديد. ثم، في next.config.mjs ، تحتاج إلى تحديث سمات org project في وظيفة withSentryConfig . بالإضافة إلى ذلك، أضف Sentry DSN الخاص بك إلى sentry.client.config.ts و sentry.edge.config.ts و sentry.server.config.ts .

تغطية الكود

يعتمد قالب Next.js SaaS على Codecov لحل إعداد تقارير تغطية التعليمات البرمجية. لتمكين Codecov، قم بإنشاء حساب Codecov وربطه بحساب GitHub الخاص بك. يجب أن تظهر مستودعاتك على لوحة تحكم Codecov. حدد المستودع المطلوب وانسخ الرمز المميز. في GitHub Actions، حدد متغير البيئة CODECOV_TOKEN والصق الرمز المميز.

تأكد من إنشاء CODECOV_TOKEN باعتباره سر إجراءات GitHub، ولا تلصقه مباشرة في كود المصدر الخاص بك.

التسجيل

يستخدم المشروع Pino.js للتسجيل. في بيئة التطوير، يتم عرض السجلات في وحدة التحكم بشكل افتراضي.

بالنسبة للإنتاج، تم دمج المشروع بالفعل مع Better Stack لإدارة سجلاتك والاستعلام عنها باستخدام SQL. لاستخدام Better Stack، تحتاج إلى إنشاء حساب Better Stack وإنشاء مصدر جديد: انتقل إلى Better Stack Logs Dashboard > Sources > Connect source. بعد ذلك، ستحتاج إلى إعطاء اسم للمصدر الخاص بك وتحديد Node.js كمنصة.

بعد إنشاء المصدر، ستتمكن من عرض ونسخ رمز المصدر المميز الخاص بك. في متغيرات البيئة الخاصة بك، قم بلصق الرمز المميز في متغير LOGTAIL_SOURCE_TOKEN . الآن، سيتم إرسال جميع السجلات تلقائيًا إلى Better Stack واستيعابها.

المراقبة الدقيقة

يستخدم المشروع Checkly للتأكد من أن بيئة الإنتاج الخاصة بك تعمل دائمًا. على فترات زمنية منتظمة، يقوم Checkly بتشغيل الاختبارات التي تنتهي بامتداد *.check.e2e.ts ويعلمك في حالة فشل أي من الاختبارات. بالإضافة إلى ذلك، لديك المرونة اللازمة لتنفيذ الاختبارات من مواقع متعددة للتأكد من أن طلبك متاح في جميع أنحاء العالم.

لاستخدام Checkly، يجب عليك أولاً إنشاء حساب على موقعهم الإلكتروني. بعد إنشاء حساب، قم بإنشاء مفتاح API جديد في لوحة معلومات Checkly وقم بتعيين متغير البيئة CHECKLY_API_KEY في GitHub Actions. بالإضافة إلى ذلك، ستحتاج إلى تحديد CHECKLY_ACCOUNT_ID ، والذي يمكن العثور عليه أيضًا في لوحة تحكم Checkly ضمن إعدادات المستخدم > عام.

لإكمال الإعداد، قم بتحديث ملف checkly.config.ts باستخدام عنوان بريدك الإلكتروني وعنوان URL للإنتاج.

أوامر مفيدة

محلل الحزمة

تتضمن Next.js SaaS Starter Kit محللًا مدمجًا للحزم. يمكن استخدامه لتحليل حجم حزم JavaScript الخاصة بك. للبدء، قم بتشغيل الأمر التالي:

npm run build-stats

من خلال تشغيل الأمر، سيتم فتح نافذة متصفح جديدة تلقائيًا مع النتائج.

استوديو قاعدة البيانات

تم تكوين المشروع بالفعل باستخدام Drizzle Studio لاستكشاف قاعدة البيانات. يمكنك تشغيل الأمر التالي لفتح استوديو قاعدة البيانات:

npm run db:studio

بعد ذلك، يمكنك فتح https://local.drizzle.studio باستخدام متصفحك المفضل لاستكشاف قاعدة البيانات الخاصة بك.

معلومات VSCode (اختياري)

إذا كنت من مستخدمي VSCode، فيمكنك الحصول على تكامل أفضل مع VSCode عن طريق تثبيت الامتداد المقترح في .vscode/extension.json . يأتي رمز البدء مزودًا بالإعدادات للتكامل السلس مع VSCode. يتم توفير تكوين التصحيح أيضًا لتجربة تصحيح أخطاء الواجهة الأمامية والخلفية.

من خلال المكونات الإضافية المثبتة في VSCode، يمكن لـ ESLint وPrettier إصلاح التعليمات البرمجية وأخطاء العرض تلقائيًا. الأمر نفسه ينطبق على الاختبار: يمكنك تثبيت ملحق VSCode Vitest لتشغيل اختباراتك تلقائيًا، كما يعرض أيضًا تغطية التعليمات البرمجية في السياق.

نصائح احترافية: إذا كنت بحاجة إلى فحص واسع النطاق لمشروع باستخدام TypeScript، فيمكنك تشغيل إصدار باستخدام Cmd + Shift + B على نظام Mac.