الهدف
بعد هالدرس عندك Capacitor مثبّت في مشروع Next.js، iOS و Android platforms مضافين، وقادر تفتح المشروع في Xcode و Android Studio.
ليش هذا الحين؟
الدرس الأول حدّد الفروق وجهّز ذهنك. الحين نبني. Capacitor هو الخطوة الأولى والأهم — بدونها ماكو mobile app. الخطوة هذي تاخذ 20 دقيقة وما ترجع لها بعد ما تكملها.
الفكرة
Capacitor = native shell + bridge.
الـ native shell هو iOS app حقيقي (Swift) و Android app حقيقي (Kotlin) — بس بدال ما يعرضون UI مكتوب بـ Swift/Kotlin، يعرضون web view يحمّل ملفاتك الـ HTML/CSS/JS المبنية.
الـ bridge هو الجسر اللي يخلي JavaScript يتكلم مع الكود الـ native — مثلا لما تقول Camera.getPhoto() في JavaScript، الـ bridge يحوّل الطلب لـ Swift/Kotlin ويرجع النتيجة.
مهم: Capacitor يشتغل مع static export بس. Next.js API routes ما تشتغل في static export — لازم تكون على سيرفر خارجي (Supabase، Vercel API، إلخ).
دورة sync/copy:
pnpm build → يبني ملفات static في مجلد out/
npx cap copy → ينسخ out/ لـ ios/App/public/ و android/app/src/main/assets/public/
npx cap sync → copy + تحديث native plugins