ازاي تنسا الـ APIs التقليدية؟ الدليل الشامل للتعامل مع الـ Server Actions في Next.js

يا هلا بيك يا سيدي، لو انت مبرمج ويب (Web Developer) وبتشتغل بـ نيكست جيه إس (Next.js)، أكيد عانيت قبل كده من اللفة الطويلة بتاعة عمل الـ APIs. يعني عشان تعمل زرار بسيط يضيف منتج للسلة أو يسجل المستخدم، كنت بتضطر تعمل ملف جديد جوه مجلد الـ api، وتكتب روت (Route)، وتظبط الـ Methods زي POST و GET، وبعدين تروح في الفرونت إند (Front-end) تعمل Fetch، وتضيع وقت طويل في إدارة الـ Loading والـ Error states. وجع دماغ مش طبيعي صح؟

النهارده جايب لك الحل السحري اللي هيفك لك العقدة دي! هنتكلم عن الـ إجراءات الخادم (Server Actions) في نيكست جيه إس. الطريقة دي هتخليك تكلم قاعدة البيانات (Database) مباشرة من مكونات الفرونت إند (React Components) من غير ما تحتاج تبني واجهات برمجة تطبيقات مستقلة (Independent APIs). تعالى بينا نفهم الموضوع بعمق وبكل بساطة.

إيه هي الـ Server Actions وليه ظهرت أصلاً؟

باختصار شديد، الـ إجراءات الخادم (Server Actions) هي عبارة عن دوال جافاسكريبت (JavaScript Functions) بتشتغل على السيرفر (Server-side)، بس الجميل بقى إنك تقدر تنادي عليها مباشرة من قلب الـ Client Components أو حتى تربطها بـ HTML Forms العادية من غير ما تكتب كود Fetch معقد.

الهدف الأساسي من الخاصية دي هو تسهيل حياة المبرمجين. بدل ما تقسم مشروعك نصين (Backend API منفصل و Frontend شغال لوحده)، نيكست جيه إس بيسمح لك تكتب الكود اللي بيعدل في قاعدة البيانات جوه نفس الملف أو في ملف خاص بالـ Actions، وتناديه كأنه دوال عادية خالص. ده بيوفر وقت، بيقلل حجم الكود (Boilerplate code)، وبيخلي الأداء أسرع بكتير.

ازاي تعمل أول Server Action في مشروعك؟

عشان تبدأ تستخدم الـ إجراءات الخادم (Server Actions)، الموضوع أبسط مما تتخيل. كل اللي محتاجه إنك تكتب كلمة use server في أول الملف لو كنت بتكتبها في ملف خارجي، أو في أول الدالة نفسها لو كانت جوه مكون شغال على السيرفر.

تعالى ناخد مثال عملي، فرضا إننا عايزين نعمل فورم لتسجيل مستخدم جديد في قاعدة البيانات (Database) باستخدام ORM زي Prisma مثلاً:

// app/actions.ts
'use server'

import { db } from "@/lib/db"
import { revalidatePath } from "next/cache"

export async function createUser(formData: FormData) {
    const name = formData.get("name") as string
    const email = formData.get("email") as string

    try {
        await db.user.create({
            data: {
                name,
                email,
            },
        })

        // بنعمل تحديث للصفحة عشان البيانات الجديدة تظهر فوراً
        revalidatePath("/users")
    }kach (error) {
        return { error: "فشل في تسجيل المستخدم" }
    }
}

زي ما انت شايف، استخدمنا 'use server' في البداية، وده بيعرف نيكست جيه إس إن الكود ده مينفعش يشتغل أبداً في المتصفح (Browser)، ولازم يتنفذ حصرياً على السيرفر لأسباب أمنية بحتة.

ربط الـ Server Action بالواجهة (Front-end Integration)

الجمال الحقيقي بيبين لما نيجي نستخدم الدالة دي جوه الـ UI. زمان كنا بنعمل onSubmit ونتحكم في الـ Event ونمنع الـ Default behavior وبعدين نعمل fetch(). دلوقتي، الموضوع بقى أسهل بكتير مع خاصية الـ ربط النماذج (Form Actions) وكمان خطاف الـ حالة الاستجابة (useFormStatus).

// app/users/page.tsx
import { createUser } from "@/app/actions"
import SubmitButton from "@/components/SubmitButton"

export default function AddUserPage() {
    return (
        <form action={createUser}>
            <input type="text" name="name" placeholder="اكتب الاسم هنا" required />
            <input type="email" name="email" placeholder="اكتب البريد الإلكتروني" required />
            <SubmitButton />
        </form>
    )
}

ولو عايز تعرف حالة التحميل (Loading state) والزرار يبقي معطل وأنت بتعمل Submitting، نيكست جيه إس وفر لنا خطاف جامد جداً اسمه useFormStatus بنستخدمه جوه مكون فرعي للزرار:

// components/SubmitButton.tsx
'use client'

import { useFormStatus } from "react-dom"

export default function SubmitButton() {
    const { pending } = useFormStatus()

    return (
        <button type="submit" disabled={pending}>
            {pending ? "جاري الحفظ..." : "حفظ المستخدم"}
        <button>
    )
}

الأمان والتحقق من البيانات (Security and Validation)

بما إننا بنتكلم عن تعديل قاعدة البيانات مباشرة من الفرونت إند، فأكيد أول سؤال هييجي في بالك: فين الأمان؟ هل أي حد يقدر ينادي على الـ Server Actions دي؟

الإجابة هي: لا تقلق، نيكست جيه إس بيتعامل مع الـ إجراءات الخادم (Server Actions) على أها طلبات (POST Requests) مؤمنة، بس الأمان الحقيقي بيعتمد عليك انت كمبرمج. لازم تراعي النقطتين الجايين:

• التحقق من الصلاحيات (Authentication & Authorization): لازم جوه دالة الـ Server Action تتأكد هل المستخدم ده مسجل دخول أصلاً؟ وهل عنده صلاحية يعمل الأكشن ده ولا لأ؟
• التحقق من صحة المدخلات (Validation): متثقش أبداً في البيانات الجاية من العميل (Client). استخدم مكتبات قوية زي Zod عشان تتأكد إن البيانات مطابقة للشروط قبل ما ترميها في قاعدة البيانات.

مثال سريع باستخدام Zod:

import { z } from "zod"

const schema = z.object({
    email: z.string().email({ message: "البريد الإلكتروني غير صالح" }),
})

// جوه الـ Server Action
const result = schema.safeParse({ email: formData.get("email") })
if (!result.success) {
    return { errors: result.error.flatten().fieldErrors }
}

الخلاصة: نصيحة من أخ

الـ Server Actions مش مجرد موضة في عالم الـ Web Development، دي نقلة نوعية حقيقية هتختصر عليك ساعات طويلة من كتابة كود الـ API المتكرر. بس تذكر دايماً، العظمة توقظ المسؤولية! استخدمها بحكمة، واهتمامك بالأمان والـ Validation هو اللي هيفرق بين تطبيق محترف وتطبيق مخترق.

جرب تفتح مشروعك الجاي وتبدأ تستبدل الـ API Routes القديمة بالـ Server Actions، وهتلاحظ بنفسك قد إيه الكود بقى أنظف وأسرع في الكتابة. بالتوفيق يا بطل، ولو عندك أي استفسار سيبه في التعليقات!