Next.js • المستوى الثالث • الدرس 1

إجراءات الخادم وإدارة النماذج (Server Actions)

أهداف الدرس العلمية

استخدام التوجيه 'use server' لإنشاء دالة تُنفذ بأمان خلف الكواليس.
معالجة بيانات النماذج عبر الخادم مباشرة دون الحاجة لكتابة نقاط API منفصلة.
ربط النموذج بدالة الخادم عبر action={handleSubmit}.
قراءة بيانات النموذج على الخادم عبر formData.get().

1. ميزة Server Actions

تتيح لك ربط عنصر form بدوال خادم آمنة مباشرة، مما يقلل تعقيد الأكواد ويعزز الأمان والأداء بشكل كبير.

javascript

async function handleSubmit(formData) {
  'use server';                    // ← تُنفَّذ على السيرفر
  const email = formData.get('email');
  console.log("البريد:", email);
}

return (
  <form action={handleSubmit}>     {/* ← ربط مباشر */}
    <input name="email" />
    <button>إرسال</button>
  </form>
);

2. قبل Server Actions vs بعدها

❌ الطريقة القديمة

• إنشاء API Route منفصل
• كتابة fetch في العميل
• إدارة حالة التحميل يدوياً
• كود كثير ومتشعّب

✅ مع Server Actions

• دالة واحدة بـ 'use server'
• ربط مباشر بـ action={...}
• لا حاجة لإدارة حالة
• كود أنظف وأأمن

التطبيق العملي المباشر

تحدي الدرس الأول: نموذج الاشتراك المتكامل

قم بالتعديل على الكود في المحرر أدناه:

أضف حقل إدخال جديد باسم name لاسم المستخدم (قبل حقل البريد).
اقرأ قيمة الاسم داخل handleSubmit عبر formData.get('name').
أضف فقرة ثانوية <p> أسفل العنوان بنص إرشادي: "أدخل بياناتك للحصول على آخر الدروس والتحديثات."

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى 3 الانتقال للدرس الثاني