المكدس التقني لتطوير الويب المعتمد على الذكاء الاصطناعي (AI-Native)
تغير وكلاء الذكاء الاصطناعي (AI agents) مثل Claude Code طريقة بناء البرمجيات. يمكنك التحرك بسرعة أكبر من أي وقت مضى. لكن السرعة قد تؤدي إلى كود فوضوي. يجب أن تحافظ على بساطة مشروعك وقابليته للصيانة من أجل النمو.
إليك المكدس (stack) الذي نستخدمه للبناء بسرعة والتوسع بسهولة.
استراتيجية وكلاء الذكاء الاصطناعي (AI Agent Strategy) لا تبالغ في هندسة الحلول (overengineer). يسهل الذكاء الاصطناعي إضافة آلاف الأسطر من الكود غير المفيد.
- حافظ على صغر حجم ملفات AGENTS.md أو CLAUDE.md.
- قم بتضمين قواعد المشروع التي يخطئ فيها الوكلاء غالباً فقط.
- قم بتثبيت مهارات محددة فقط عند الحاجة إليها.
- قم بإزالة المهارات عند انتهاء المحادثة للحفاظ على نظافة السياق (context).
الواجهة الأمامية وواجهة المستخدم (Frontend and UI)
- Next.js: استخدم App Router. فهو يتعامل مع رندرة الجانب الخادم (server-side rendering) لتحسين SEO والسرعة.
- React: أفضل نظام بيئي (ecosystem) لإضافة الميزات بسرعة.
- MUI (Material UI): نستخدمه لتجنب تصميم كل شيء من الصفر في Figma. إنه يوفر شهوراً من العمل.
- Zod و React Hook Form: أفضل مزيج للتعامل مع النماذج المعقدة والتحقق من صحتها (validation).
الخلفية والبيانات (Backend and Data)
- Firebase: نستخدمه للمصادقة (authentication)، والتخزين، وقاعدة البيانات (Firestore).
- Firestore Rules: يتولى هذا الملف جميع الأذونات في ملف واحد، مما يلغي الحاجة إلى كود أمني متكرر.
- Firebase Functions: استخدمها للمنطق المعقد (complex logic). اجعل الواجهة الأمامية بسيطة (dumb) والخلفية ذكية (smart).
- Vercel AI SDK: أسهل طريقة لدمج نماذج الذكاء الاصطناعي المختلفة في تطبيقك.
الاختبار والنشر (Testing and Deployment)
- Integration Tests: نستخدم Jest لاختبار طبقة خدمة الخلفية (backend service layer). نركز على كيفية عمل الأجزاء معاً بدلاً من اختبارات الوحدات (unit tests) الصغيرة.
- TypeScript: هذا ضروري لإعادة هيكلة الكود (refactoring) بشكل آمن.
- Vercel: يتصل بـ GitHub لتوفير عمليات نشر فورية للإنتاج (production) والمعاينة (preview).
- PostHog: استخدمه للتحليلات، وإعادة تشغيل الجلسات (session replays)، وسجلات الأخطاء.
- Resend و react-email: يتيح لك ذلك كتابة رسائل البريد الإلكتروني كمكونات React.
يوجد مشروع قالب بهذا الهيكل على GitHub.
المصدر: https://dev.to/martinxpn/the-teach-stack-for-building-web-platforms-in-the-ai-native-era-45ka
مجتمع تعليمي اختياري: https://github.com/MartinXPN/nextjs-firebase-mui-starter