فيديو توضيحي: قالب متجر إلكتروني بـ Next.js مع لوحة تحكم وواجهة برمجية

يقدم قالب التجارة الإلكترونية بـ Next.js واجهة متجر ولوحة تحكم وواجهة برمجية كاملة في مستودع واحد، لتطلق متجرًا حقيقيًا بدل ربط ثلاثة مشاريع منفصلة. واجهة المتجر مبنية على Next.js 16 مع App Router و Server Components و Tailwind CSS 4 و TanStack Query و Redux Toolkit و Motion و Embla. يتصفح العميل كتالوجًا ببحث وفلاتر عبر الرابط، ويفتح صفحات منتج فيها معارض صور وخيارات وتقييمات ومنتجات مشابهة، ويحتفظ بالسلة والمفضلة بين الجلسات، ويمر بعملية شراء كاملة، ويدير حسابه وعناوينه، أو يتتبع طلبه كزائر.

تغطي الواجهة الخلفية NestJS كامل عمليات المتجر: المنتجات والتصنيفات والطلبات والسلات والعناوين والتقييمات والعملاء والفريق والأدوار وأقسام الصفحة الرئيسية والإعدادات. تعمل على TypeORM مع MySQL أو SQLite، وتصدر رموز JWT منفصلة للعملاء والموظفين، وترسل إشعارات فورية عبر Socket.io، وترفع الوسائط إلى أي تخزين متوافق مع S3 مثل Cloudflare R2، وتملأ قاعدة البيانات بكتالوج واقعي بأمر واحد.

ثلاث ميزات ذكاء اصطناعي مدمجة في صميم القالب. تجربة الملابس الافتراضية تُري المتسوق القطعة على صورته. استوديو المنتجات ينشئ صور المنتجات ويزيل الخلفيات بحصص لكل حساب ويكتب مسودات وصف انطلاقًا من صورة. المساعد الإداري يجيب عن أسئلتك حول بياناتك عبر سجل أدوات MCP، ويعمل بنماذج Google Gemini من خلال Vercel AI SDK.

قياس التسويق مربوط أيضًا. Google Tag Manager و GA4 وبكسل Meta و TikTok و Snapchat و Pinterest تُفعّل بلصق معرّف واحد في ملف البيئة، وترسل واجهة المتجر مسار الشراء كاملًا إلى كل وسم تفعّله: مشاهدات الصفحات في كل انتقال، ومشاهدة المنتج، والإضافة إلى السلة، والمفضلة، وبدء الدفع، والشراء بإجمالي الطلب الحقيقي، والبحث وإنشاء الحساب. المعرّف الفارغ لا يحمّل أي سكربت، وإضافة شبكة سابعة تكفيها ملف واحد.

كل شيء ثنائي اللغة منذ البداية: الإنجليزية والعربية بدعم RTL كامل، وضعان فاتح وداكن، هوية العلامة التجارية في ملف إعداد واحد لكل تطبيق، نماذج مبنية على React Hook Form و Zod، وكل تبعية مثبتة على إصدار محدد مع ملفات قفل.