'use client'

توجيه مكوّنات العميل 'use client'

'use client' يعلن أن المكوّنات المُصدَّرة من هذا الملف تُصيَّر وتعمل بالمتصفح (Client Components)، وتُستخدم لأي تفاعل يحتاج state أو أحداث أو Browser APIs.

توجّه بالسطر الأول من الملف، قبل أي import. يحدّد 'حدود' بين كود الخادم وكود العميل — كل شي يُصدَّر من ذاك الملف يصير نقطة دخول للعميل، وأي مكوّن يستورده يصير جزءًا من نفس حزمة العميل.

ما تحتاج تحطه بكل ملف فيه Client Component — بس بالملفات اللي تريدها نقطة دخول مباشرة من مكوّن خادم. props المُمرَّرة من الخادم للعميل لازم تكون قابلة للتسلسل (serializable) — نصوص وأرقام وكائنات عادية، لا دوال خام.

الصياغة

'use client'

import { useState } from 'react';
// ... باقي المكوّن

📄 مثال

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>العدّاد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زِد</button>
    </div>
  );
}

أهم النقاط

العنصر	الوظيفة
أعلى الملف	يوضع قبل أي import، مرّة وحدة بالملف فقط
props قابلة للتسلسل	props مُمرَّرة من مكوّن خادم لازم تكون serializable — لا دوال خام

💡 نصائح عملية

ما تحتاج تحطه بكل ملف فيه Client Component — بس بالملفات اللي تريدها نقطة دخول من مكوّن خادم
لو احتجت تمرّر دالة من الخادم للعميل (زي Server Action)، مررها كـ prop مباشرة — هذا مسموح ومختلف عن تمرير دالة عادية

⚠️ أخطاء شائعة

حطّه بكل مكوّن 'احتياطًا' — يفقدك مزايا Server Components متل جلب البيانات المباشر وتقليل حزمة جافاسكربت
تمرير دالة جافاسكربت عادية (onClick محلي بالخادم) كـ prop لمكوّن عميل — غير قابلة للتسلسل وترمي خطأ

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار NEXTJS الكامل بالعربي.