جاري التحميل...
جاري التحميل...
إنشاء وتعديل وحذف المقالات
CRUD هو اختصار لـ Create و Read و Update و Delete - العمليات الأساسية الأربع لإدارة البيانات. في هذا الدرس نقوم بتنفيذها باستخدام Server Actions و Supabase.
💡 عمليات CRUD:
Create = إدراج سجلات جديدة، Read = جلب وعرض البيانات، Update = تعديل السجلات الموجودة، Delete = إزالة السجلات.
نحتاج إلى عميلين Supabase: واحد للعمليات من جانب الخادم (server.js) وواحد للعمليات من جانب العميل (client.js).
💡 الخادم مقابل العميل:
عميل الخادم يتعامل مع الطلبات المصادق عليها باستخدام ملفات تعريف ارتباط، عميل العميل للاستعلامات من جانب المتصفح.
استخدم Server Actions لإنشاء مقالات جديدة. Server Actions هي دوال تعمل على الخادم ويمكن استدعاؤها من تقديم النماذج.
💡 نمط Server Actions:
حدد الدالة بـ 'use server'، تلقي FormData، استخدم Supabase للإدراج، استدعِ revalidatePath و redirect.
اجلب المقالات من Supabase باستخدام مكونات الخادم. يقوم Next.js بتحسين جلب البيانات على الخادم تلقائيًا.
💡 نمط الجلب:
استخدم supabase.from('posts').select() مع البيانات المرتبطة، تعامل مع الأخطاء بسلاسة، استخدم .order() للفرز.
أنشئ وظيفة تحديث في Server Actions وصفحة نموذج تحمل البيانات الموجودة للتعديل.
💡 نمط التحديث:
حمّل البيانات الموجودة مع defaultValue، استخدم supabase.update() مع فلتر .eq()، أعد التحقق من المسارات المتأثرة.
أنشئ وظيفة حذف مع حوار تأكيد. استخدم useTransition لأوقات التحميل.
💡 نمط الحذف:
أضف حوار تأكيد، استخدم useTransition لحالة الانتظار، استدعِ revalidatePath بعد الحذف.
التحديثات التفاؤلية تقوم بتحديث واجهة المستخدم فورًا قبل تأكيد الخادم للتغيير، ثم تعود إذا حدث خطأ.
💡 نمط useOptimistic:
قم بتحديث واجهة المستخدم فورًا لتجربة مستخدم أفضل، عُد في حالة الخطأ، استخدمها للعمليات التي يهم فيها السرعة.
ما هي Server Actions في Next.js؟
لماذا نحتاج إلى عميلين Supabase؟
أضف تصفية التصنيف إلى صفحة قائمة المقالات. أنشئ مكون CategoryFilter، استخدم معلمات URL لتتبع التصنيف المحدد، نفذ التصفية في استعلام Supabase.
عمليات Supabase:
.insert([{}]) - إنشاء سجل جديد.select() - جلب البيانات.update({}) - تحديث سجل موجود.delete() - حذف سجل.eq('field', value) - شرط الفلترServer Actions:
"use server" توجيهFormData كمعاملrevalidatePath() لتحديث الذاكرة المؤقتةredirect() بعد النجاحكيف تدير أخطاء المشروع؟
الإجابة:
اكتب اختبارات، استخدم linting، و راجع الكود باستمرار.
كيف تُحسّن أداء المشروع؟
الإجابة:
قلل الـ bundle size، استخدم lazy loading، وحسّن الصور.
استخدم Git branches
افصل كل ميزة في branch منفصل
اكتب tests
لا تنشر ميزة بدون اختبارات