Next.js • المستوى الأول • الدرس 3

مكونات الخادم والمكونات التفاعلية (Server vs Client Components)

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

معرفة أن جميع مكونات Next.js هي Server Components افتراضياً لسرعة الأداء.
إضافة التوجيه المباشر 'use client' في السطر الأول عند استخدام State أو الأحداث.
فهم أن 'use client' يجب أن يكون أول سطر في الملف قبل أي import.
التمييز بين متى نستخدم Client Component ومتى نستخدم Server Component.

1. متى نستخدم 'use client'؟

تُستخدم فقط عندما نود دمج تفاعليات المتصفح مثل useState، useEffect، أو مستمعي الأحداث مثل onClick.

javascript

// ✅ Server Component (افتراضي) — لا يحتاج 'use client'
export default function StaticPage() {
  return <h1>هذه صفحة ثابتة</h1>;
}

// ✅ Client Component — يحتاج 'use client'
'use client';
import { useState } from 'react';

export default function InteractivePage() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2. مقارنة Server vs Client

🖥️ Server Component

• الافتراضي في Next.js
• أسرع في التحميل
• لا يحتوي على useState
• لا يستمع للأحداث

⚡ Client Component

• يحتاج 'use client'
• تفاعلي مع المستخدم
• يدعم useState/useEffect
• يدعم onClick/onChange

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

تحدي الدرس الثالث: إضافة زر الإعجاب والتراجع

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

أضف زراً ثانياً بعنوان "عدم الإعجاب 👎".
اربط الزر بالحدث onClick لاستدعاء setLikes(likes - 1) لإنقاص الإعجابات.
اختر لوناً أحمر (#dc2626) لتمييزه عن زر الإعجاب.

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

الدرس السابق الانتقال للدرس الرابع