React 19 و Next.js للمطورين العاملين

عن الدورة

React 19 و Next.js 15 يغيّران الطريقة التي تُكتب بها الواجهات الأمامية للإنتاج: مكونات الخادم تعمل افتراضيًا على الخادم، و Server Actions تحلّ محل نصف مسارات API التي كنت ستكتبها، وحدود `use client` صارت أهم قرار معماري لديك. هذه الدورة لمطورين سبق لهم بناء تطبيقات React بالطريقة القديمة (CRA و Pages Router والكثير من useEffect). نُعيد بناء تطبيق حقيقي — كاتالوج لسوق إلكتروني مع نظام دخول وبحث ولوحة إدارة — باستخدام الأنماط الجديدة، ونشرح ما الذي اختلف فعلًا ولماذا يهم للأداء وتجربة المطور.

ما ستتعلّمه

• 1

  لماذا React 19 و Next.js 15 — ما الذي تغيّر وما لم يتغيّر

  التحوّل من العقلية client-first إلى server-first. متى تساعد الأنماط الجديدة ومتى لا.

• 2

  App Router والتخطيطات ومكونات الخادم

  التوجيه المعتمد على الملفات بصيغته الجديدة. التخطيطات المتداخلة و loading.tsx و error.tsx، وماذا يكلّفك `'use client'` فعلًا.

• 3

  جلب البيانات بالطريقة الحديثة

  مكونات خادم async، تخزين fetch المؤقت، revalidate، ومتى تحتاج فعلًا لمكتبة استعلامات على العميل.

• 4

  Server Actions ونماذج تعمل بدون JavaScript

  استبدل نصف مسارات الـ API. تحسين تدريجي يعمل فعلًا حتى دون JavaScript.

• 5

  نظام الدخول في App Router (NextAuth v5)

  نظام دخول حقيقي دون كتابته من الصفر. بريد + كلمة سر، تحقّق OTP، صلاحيات بحسب الدور.

• 6

  التعدد اللغوي و RTL بالطريقة الصحيحة

  next-intl، التوجيه حسب اللغة، قلب RTL مع Tailwind، ترجمات احتياطية بالذكاء الاصطناعي. توطين بمستوى المنطقة.

• 7

  النشر والتخزين المؤقت ومؤشرات الأداء

  اختر مزوّد الاستضافة (Vercel أو VPS)، اضبط التخزين المؤقت، حقق Core Web Vitals خضراء على جهاز حقيقي.

المهارات اللي هتبنيها

• React 19
• Next.js 15
• مكونات الخادم
• Server Actions
• App Router
• TypeScript
• NextAuth
• Tailwind CSS