nextjs tailwind ionic capacitor starter Download - nextjs tailwind ionic capacitor starter Source Code Download

nextjs tailwind ionic capacitor starter

كود الذكاء الاصطناعي

5.0.0

تنزيل

next.js + Tailwind CSS + Ionic Framework + Capacitor Mobile Starter

لقطة شاشة

هذا الريبو هو نقطة انطلاق مفاهيمية لبناء تطبيق iOS و Android و Web Progressive مع Next.js و Tailwind CSS و Ionic Framework و Capacitor.

يعالج Next.js تجربة تطبيق React Production ، يمكن استخدام Wailwind لتنظيم كل صفحة من التطبيقات الخاصة بك ، ويوفر Ionic Framework عناصر التحكم في نظام المنصات (التنقل/التحولات/علامات التبويب/الخ.

شاهد منشور المدونة هذا للحصول على نظرة عامة على المكدس وكيف يعمل كل شيء: https://dev.to/ionic/build-mobile-apps-with-tailwind-css-next-js-ionic-framework-and-capacitor-3kij

الاستخدام

هذا المشروع هو تطبيق Next.js قياسي ، لذلك تنطبق عملية تطوير Next.js النموذجية ( npm run dev للتطوير القائم على المتصفح). ومع ذلك ، هناك تحذير واحد: يجب تصدير التطبيق للنشر إلى iOS و Android ، لأنه يجب أن يعمل جانب العميل بحت. (المزيد على تصدير Next.js)

لبناء التطبيق ، قم بتشغيل:

npm run build

سيتم إرسال جميع الملفات الجانبية للعميل إلى دليل ./out/ . يجب نسخ هذه الملفات إلى مشاريع iOS و Android الأصلية ، وهذا هو المكان الذي يأتي فيه المكثف:

npm run sync

أخيرًا ، استخدم أوامر التشغيل التالية لتشغيل التطبيق على كل منصة:

npm run ios
npm run android

Livereload/تحديث فوري

لتمكين Livereload والتحديث الفوري أثناء التطوير (عند تشغيل npm run dev ) ، ابحث عن عنوان IP للواجهة المحلية الخاصة بك (على سبيل المثال: 192.168.1.2 ) ومنفذ يعمل خادم Next.js الخاص بك ، ثم قم بتعيين قيمة تكوين عنوان URL الخادم للإشارة إليها في capacitor.config.json :

{
  "server" : {
    "url" : " http://192.168.1.2:3000 "
  }
}

ملاحظة: يكون هذا التكوين أسهل في مكثف 3 الذي دخل في Beta مؤخرًا.

طرق API

يمكن استخدام طرق API ولكن هناك حاجة إلى بعض التكوين. انظر هذه المناقشة لمزيد من المعلومات.

تحذيرات

تحذير واحد مع هذا المشروع: نظرًا لأن التطبيق يجب أن يكون قادرًا على تشغيل جانب العميل البحت واستخدام أمر التصدير الخاص بـ NEXT.JS ، فهذا يعني عدم وجود جانب من جانب الخادم في قاعدة الرمز هذه. من المحتمل أن يكون هناك طريقة إلى SSR وتطبيق Next.js ثابت بالكامل بشكل جنب ، ولكنه يتطلب مكونًا إضافيًا بابل أو سيتضمن إعدادًا أكثر تفصيلاً مع مشاركة الكود خارج نطاق هذا المشروع.

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