fullstack nextjs app generator

منشئ Fullstack Next.js

ملخص

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

جدول المحتويات

• المتطلبات الأساسية
• تثبيت
• الاستخدام
• متغيرات البيئة
• سير عمل النشر
• ملاحظات هامة
• رخصة
• روابط ذات صلة

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

قبل استخدام هذا التطبيق، تأكد من تثبيت المتطلبات الأساسية التالية وتكوينها:

• Node.js (الإصدار 14.x أو أعلى) وnpm/yarn.
• حسابات مع Vercel وSupabase.
• حساب ngrok للنفق (لخادم النشر).
• مفتاح Spark API الذي يمكنك الحصول عليه عن طريق التسجيل في Spark Engine والانتقال إلى Account > API Keys .

تثبيت

لإعداد المشروع، اتبع الخطوات التالية:

1. استنساخ المستودع:

   git clone https://github.com/spark-engine-opensource-projects/fullstack-nextjs-app-generator.git
   cd fullstack-nextjs-app-generator

2. تثبيت التبعيات:

   npm install
   # or
   yarn install

3. نشر التطبيق على Vercel:

   ملاحظة: يجب نشر تطبيق Next.js Builder على Vercel حتى يعمل بشكل صحيح. اتبع هذه الخطوات لنشره:

   • تثبيت Vercel CLI:

     npm install -g vercel

   • تسجيل الدخول إلى فيرسيل:

     vercel login

   • نشر التطبيق:

     vercel --prod

   بعد النشر، تأكد من تحديث NGROK_DEPLOYER_URL في تكوين Vercel الخاص بك بعنوان URL المقدم من ngrok (كما هو موضح في قسم الملاحظات المهمة أدناه).

4. إعداد متغيرات البيئة:

   انتقل إلى مشروعك الذي تم إنشاؤه في Vercel وقم بتكوين متغيرات البيئة التالية:

   SPARK_API_KEY=your-spark-api-key
   NGROK_DEPLOYER_URL=your-ngrok-deployer-url

الاستخدام

إنشاء المشروع

1. ابدأ مشروعًا جديدًا: استخدم النموذج متعدد الخطوات لإدخال تفاصيل مشروعك، بما في ذلك اسمه ونوعه (صفحة واحدة أو صفحات متعددة) والألوان والشعارات والغرض.

2. إنشاء الصفحات والمكونات: تحديد الصفحات ومكوناتها. تخصيص التصميم حسب الحاجة.

3. إنشاء واجهات برمجة التطبيقات وإدارتها: يمكنك إنشاء واجهات برمجة التطبيقات بدون خادم وإدارتها تلقائيًا بناءً على مواصفات مشروعك.

4. تحديد مخطط قاعدة البيانات: قم بمراجعة وتعديل مخطط قاعدة البيانات الذي أنشأه التطبيق للتأكد من توافقه مع متطلبات مشروعك.

النشر

بمجرد أن يصبح مشروعك جاهزًا، يمكنك نشره مباشرةً باستخدام خادم النشر المتكامل. يدير الخادم عملية النشر، ويتكامل مع Vercel، ويتعامل مع متغيرات البيئة وإعداد قاعدة البيانات على Supabase.

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

• SPARK_API_KEY: مفتاح Spark API الخاص بك لإنشاء التعليمات البرمجية.
• NGROK_DEPLOYER_URL: عنوان URL لخادم النشر المُدار عبر ngrok.

تأكد من تعيين هذه المتغيرات في Vercel حتى يعمل التطبيق بشكل صحيح.

سير عمل النشر

1. إنشاء مشروعك وتخصيصه: اتبع العملية خطوة بخطوة في التطبيق لإنشاء مشروع Next.js وتخصيصه.
2. النشر باستخدام خادم الواجهة الخلفية: بمجرد أن يصبح المشروع جاهزًا، استخدم نقطة النهاية /deploy الخاصة بخادم الواجهة الخلفية لنشر المشروع إلى Vercel وإدارة قاعدة بيانات Supabase. يتولى خادم الواجهة الخلفية عملية النشر، بما في ذلك إدارة متغيرات البيئة وتنفيذ برامج SQL النصية.
3. المراقبة والتحديث: استخدم لوحة معلومات التطبيق لمراقبة مشروعك وتحديثه حسب الحاجة، مع خيارات لإعادة إنشاء المكونات وإعادة النشر.

ملاحظات هامة

1. استنساخ خادم النشر الخلفي: إذا كنت تريد نشر مشاريعك تلقائيًا إلى Vercel وإدارة قواعد البيانات باستخدام Supabase، فستحتاج إلى استنساخ خادم النشر الخلفي وإعداده. اتبع الخطوات التالية:

   • استنساخ مستودع خادم النشر الخلفي:

     git clone https://github.com/spark-engine-opensource-projects/Automated-NextJS-deployer-to-vercel-and-supabase.git
     cd Automated-NextJS-deployer-to-vercel-and-supabase

   • إعداد الخادم وبدء تشغيله: اتبع الإرشادات الموجودة في ملف README الخاص بخادم الواجهة الخلفية لتثبيت التبعيات وتعيين متغيرات البيئة وبدء تشغيل الخادم.

   • قم بتحديث NGROK_DEPLOYER_URL: بمجرد تشغيل خادم الواجهة الخلفية وإجراء ngrok للنفق، قم بتحديث NGROK_DEPLOYER_URL في تكوين Next.js Builder Vercel باستخدام عنوان URL المقدم من ngrok.

2. متطلبات النشر لـ Frontend Next.js Builder: يجب نشر تطبيق Next.js Builder للواجهة الأمامية إلى Vercel حتى يعمل بشكل صحيح. وذلك لأن التطبيق يعتمد على البنية التحتية لـ Vercel لإنشاء واجهة برمجة التطبيقات الديناميكية واستضافتها. اتبع تعليمات النشر المذكورة أعلاه للتأكد من استضافة التطبيق بشكل صحيح.

رخصة

هذا المشروع مرخص بموجب ترخيص MIT. راجع ملف الترخيص للحصول على التفاصيل.

روابط ذات صلة

• مستودع GitHub الأصلي: Spark Engine AI
• اكتشف مشاريع محرك الشرارة: مشاريع محرك الشرارة