جاري التحميل...
جاري التحميل...
جمع بيانات المستخدم وتمريرها للخادم بطريقة حديثة
إجراءات الخادم هي دوال تعمل فقط على الخادم. تتعامل مع إرسال النماذج وعمليات قاعدة البيانات والمهام الخادم الأخرى.
💡 تشبيه بسيط:
إجراء الخادم مثل صندوق بريد. أنت تكتب رسالة (تبيانات النموذج) وتحطها في الصندوق. تلقائياً تصل الرسالة إلى الخادم وتُعالج. لا تحتاج لكتابة كود اتصال معقد — فقط ضع البيانات في الصندوق!
في Next.js 13+، حدد الدالة بـ "use server" لجعلها إجراء خادم.
يمكن استدعاء إجراءات الخادم من مكونات العميل أو النماذج أو حتى مكونات الخادم.
أضف "use server" في أعلى الملف أو داخل دالة غير متزامنة لجعلها إجراء خادم.
💡 مهم:
يجب أن تكون إجراءات الخادم دوال غير متزامنة.
انقل إجراء الخادم إلى خاصية action لعنصر النموذج للتعامل التلقائي مع النموذج.
بعد اكتمال إجراء الخادم، استخدم revalidatePath أو revalidateTag لتحديث البيانات المخزنة مؤقتاً.
كيف تجعل الدالة إجراء خادم؟
أي نوع من الدوال يجب أن تكون إجراءات الخادم؟
هل يمكن استدعاء إجراءات الخادم من مكونات العميل؟
كيف تُحدّث البيانات المخزنة مؤقتاً بعد إجراء خادم؟
أنشئ نموذجاً يستخدم إجراءات الخادم لمعالجة الإرسالات وحفظ البيانات في قاعدة بيانات.
الحل:
"use server";
export async function submitContactForm(prevState, formData) {
const name = formData.get("name");
const email = formData.get("email");
const message = formData.get("message");
const errors = {};
if (!name || name.trim().length < 2) errors.name = "الاسم قصير جداً";
if (!email || !email.includes("@")) errors.email = "البريد غير صحيح";
if (!message || message.trim().length < 10) errors.message = "الرسالة قصيرة";
if (Object.keys(errors).length > 0) {
return { success: false, errors };
}
await db.messages.create({
data: { name: name.trim(), email: email.trim(), message: message.trim() }
});
return { success: true, message: "تم الإرسال بنجاح!" };
}إجراء خادم أساسي:
في النموذج:
كيف تحدد إجراء خادم؟
الإجابة:
أضف 'use server' في أعلى الملف أو داخل الدالة.
من يمكنه استدعاء إجراءات الخادم؟
الإجابة:
مكونات العميل، النماذج، وحتى مكونات الخادم.
استخدم useActionState للنماذج
useActionState في React 19 يدير حالة النموذج تلقائياً مع Server Actions