Dev Web & SaaS

شرح سريع وبسيط لـ React Next.js (مع مخططات وكود حقيقي)

React Next.js السريع: الأساسيات في مقال واحد — كود حقيقي، مخططات وخطوات ملموسة، مقتطفات من دورة مكونة من 46 درسًا.

REHOUMA Haythem

• 7 min read
شرح سريع وبسيط لـ React Next.js (مع مخططات وكود حقيقي)

دليل مباشر ومختصر: React Next.js Rapide مفكك بالمخططات والأمثلة العملية والأوامر المجربة. كل المحتوى مستمد من دورة منظمة تضم 11 فصلاً — وإليك أفضل ما فيها.

tl;dr
  • المقدمة والإعداد
  • أساسيات React
  • الـ Hooks الأساسية
  • App Router في Next.js
  • Server Components مقابل Client Components
~$ cat ./parcours.md # React Next.js Rapide — 10 فصول
01
مقدمة وإعداد
→ عرض الدورة : React مقابل Next.js→ تثبيت Node.js و VS Code وإضافات React+ 1 دروس أخرى
02
أساسيات React
→ JSX : HTML داخل JavaScript→ المكونات الوظيفية والـ props+ 2 دروس أخرى
03
الـ Hooks الأساسية
→ useState : إدارة حالة المكون→ useEffect : التأثيرات الجانبية والتنظيف+ 2 دروس أخرى
04
موجه التطبيق في Next.js
→ التوجيه بالمجلدات : app/page.tsx→ التخطيطات المشتركة والتداخلات+ 2 دروس أخرى
05
مكونات الخادم مقابل مكونات العميل
→ مكونات الخادم : لماذا هي ثورية→ "use client" : متى تستخدمه+ 2 دروس أخرى
06
جلب البيانات وإجراءات الخادم
→ fetch داخل مكون الخادم→ التخزين المؤقت وإعادة التحقق في Next.js+ 2 دروس أخرى
07
مسارات API والخلفية المتكاملة
→ معالجات المسارات : app/api/route.ts→ GET, POST, PUT, DELETE و NextResponse+ 2 دروس أخرى
08
التنسيق باستخدام Tailwind
→ Tailwind في Next.js، مُعد مسبقاً→ مكونات واجهة مستخدم قابلة لإعادة الاستخدام (Button, Card)+ 2 دروس أخرى
🏁
المشروع النهائي (+ 2 فصول في الطريق)
→ ستغادر بمشروع ملموس وقابل للعرض

المكونات الوظيفية و الـ props

NOTEالهدف — إنشاء مكونات وظيفية قابلة لإعادة الاستخدام وتمرير البيانات إليها عبر props، مع كتابة الأنواع بشكل صحيح باستخدام TypeScript.

الأهداف التعليمية

TIPعند إتمام هذه الوحدة
  • تعريف مكون وظيفي
  • تمرير البيانات عبر الـ props
  • كتابة أنواع الـ props باستخدام واجهة TypeScript
  • استخدام children لتضمين المحتوى
  • فهم أن الـ props للقراءة فقط

الفكرة البديهية: دالة تعيد واجهة مستخدم

المكون الوظيفي هو ببساطة دالة JavaScript تعيد JSX. يبدأ اسمه دائماً بحرف كبير (هكذا يميز React بينه وبين عناصر HTML الأصلية).

التعريف

الشرطيات والقوائم في JSX

NOTEالهدف — عرض المحتوى بشكل شرطي وإنشاء قوائم من المصفوفات مع احترام قاعدة key.

الأهداف التعليمية

TIPعند إتمام هذه الوحدة
  • العرض الشرطي باستخدام المعامل الثلاثي
  • الإظهار أو الإخفاء باستخدام &&
  • إنشاء قائمة باستخدام .map()
  • فهم سبب إلزامية الـ key
  • تجنب الأخطاء الشائعة في العرض الشرطي

العرض الشرطي باستخدام المعامل الثلاثي

بما أنه لا يمكن وضع if داخل JSX، نستخدم المعامل الثلاثي condition ? siVrai : siFaux.

أفضل الممارسات

استخدام معرف فريد وثابت (غالباً id من قاعدة البيانات).

الوضع المظلم باستخدام next-themes

NOTEالهدف — إضافة سمة مظلمة إلى تطبيق Next.js باستخدام next-themes بدون وميض عند التحميل، وتوفير زر للتبديل بين الفاتح/المظلم/النظام.

الأهداف التعليمية

TIPعند إتمام هذه الوحدة
  • تفعيل استراتيجية class في Tailwind للوضع المظلم
  • تثبيت وتهيئة next-themes
  • تجنب الوميض (FOUC) عند التحميل
  • كتابة أصناف dark: داخل المكونات
  • بناء زر تبديل السمة

كيف يعمل الوضع المظلم في Tailwind

يقوم Tailwind بتفعيل الوضع المظلم بإضافة صنف dark على وسم <html>. كل أصنافك المبدوءة بـ dark: لا تُطبَّق إلا في هذه الحالة. دور next-themes هو وضع أو إزالة هذا الصنف dark وحفظ اختيار المستخدم.

va-plus-loin

يغطي هذا المقال أكثر المقتطفات فائدة — الدورة الكاملة React Next.js Rapide (11 فصلاً، 46 درساً، تمارين محلولة ومشروع نهائي) تأخذك إلى النهاية.

./acceder-au-cours-complet cours gratuit : Vibe Coding

الأسئلة الشائعة

كم من الوقت يلزم لتعلم React Next.js Rapide؟
مع تقدم منظم (11 فصلاً و46 درساً قصيراً وعملياً) يمكن الوصول إلى مستوى تشغيلي خلال أسابيع قليلة بمعدل 30 إلى 60 دقيقة يومياً. الأهم هو تطبيق كل مفهوم فوراً.
هل هناك متطلبات سابقة؟
لا توجد متطلبات سابقة: تبدأ الدورة من الصفر وتقدم كل مفهوم قبل استخدامه.
من أين أبدأ عملياً؟
طبّق الأوامر الواردة في هذا المقال، ثم تابع الدورة الكاملة React Next.js Rapide: فهي تسلسل الـ46 درساً بالترتيب مع التمارين والمشروع النهائي.
./a-lire-aussi
→ Lance-toi en Portfolio IA SEO Vercel : ton premier pas concret aujourd'hui→ IA Stripe GitHub SaaS en pratique : le code et les commandes qui comptent vraiment→ Python Requests APIs expliqué simplement (avec schémas et vrai code)

📬 هل تريد تلقي هذا النوع من الأدلة كل أسبوع؟ اشترك مجاناً — كود حقيقي، بدون كلام زائد.

Stay up to date

Enter your email
Subscribe