تخطَّ إلى المحتوى

شرح Next.js

إجراءات الخادم (Server Actions)

الدرس 13 من 25· ⏱ 1 دقائق قراءة

ما هي Server Actions؟

دوال تعمل على الخادم وتُستدعى من المكوّنات مباشرة — مثالية لمعالجة النماذج والتعديلات دون كتابة API يدويًا.

// app/actions.ts
"use server";

export async function createPost(formData: FormData) {
  const title = formData.get("title");
  await db.insert(posts).values({ title });
}

استخدامها في نموذج

import { createPost } from "./actions";

export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button>نشر</button>
    </form>
  );
}

النموذج يعمل حتى دون جافاسكربت (تحسين تدريجي).

تحديث الواجهة بعد التعديل

import { revalidatePath } from "next/cache";

export async function createPost(formData: FormData) {
  // ... حفظ ...
  revalidatePath("/blog");   // أعد توليد الصفحة بالبيانات الجديدة
}

⚠️ تحقّق دائمًا من الصلاحيات والمدخلات داخل الإجراء — يُستدعى من العميل.

🎯 التالي: جلب البيانات بعمق.

هل كان هذا الدرس مفيدًا؟