Menu
CoddyTech
ابدأ التعلم
flag Ar iconالعربيةdown icon
react iconجزء من رحلة Reactجديدرحلة

تعلّم Next.js

دورة Next.js مجانية وتفاعلية تنقلك من مكونات React إلى تطبيق حقيقي: التوجيه والتخطيطات ومكونات الخادم والعميل وجلب البيانات وserver actions. تساعدك تلميحات الذكاء الاصطناعي عندما تتعثر، وتحصل على شهادة مجانية عند الانتهاء.

ابدأ التعلم(مجاني)
عرض المنهجPlayground لـ أساسيات Next.js

2,333+ من الـ codders مسجلون

47 درسًا41 تحديات99 أسئلة الاختبار

  • مناسب للمبتدئين
  • sparkles iconمساعدة برمجية بالذكاء الاصطناعي
  • hint iconدروس تفاعلية عملية
  • quiz iconاختبارات لقياس معرفتك
  • certificate iconشهادة إتمام مجانية

المنهج

1 أقسام1 مشاريع47 درسًا41 تحديات99 أسئلة الاختبار

هذا القسم جزء من رحلة React. المنهج الكامل يحتوي على أقسام أكثر - اضغط على أي معاينة أدناه لعرضها في صفحة الرحلة.

  1. قسم 1الأساسيات42 درسًا
  2. قسم 2

    أساسيات Next.js

    ابدأ القسمابدأتوسيعطي    انتقل من مكونات React إلى تطبيق حقيقي: التوجيه عبر نظام الملفات (file-system routing)، والتخطيطات (layouts)، ومكونات الخادم والعميل (server and client components)، وجلب البيانات (data fetching)، وإجراءات الخادم (server actions)، ومشروع Next.js مكتمل.47 درسًا41 تحديات99 أسئلة1 مشروع

    لماذا Next.js

    4 درسًا39

    التوجيه والروابط

    6 درسًا516

    التخطيطات والبيانات الوصفية

    6 درسًا515

    الخادم والعميل (Server & Client)

    6 درسًا515

    البيانات على الخادم

    6 درسًا516

    إجراءات الخادم (Server Actions)

    5 درسًا413

    التنقل من جانب العميل

    5 درسًا515

    مشروع: كودي يأكل (Coddy Eats)

    مشروع9 درسًا9
عرض منهج رحلة React كاملاً
ما الذي تحصل عليه
كل ما ستستخدمه لتتعلّم البرمجة

تعلّم بالممارسة

اكتب أكواداً حقيقية، واستعلم من قواعد البيانات، وأنشئ مواقع ويب، وأتقن أوامر الذكاء الاصطناعي. دروسنا التفاعلية تغطي كل المهارات التي يحتاجها المطورون المعاصرون.

playground.js
محرر الأكواد
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
اختبار #1test Case Success icon
اختبار #2test Case Success icon
اختبار #3test Case Failure icon
الإدخال
"Alex"
الإخراج
"Hello, Coddy! Alex"

ابنِ سلسلتك

حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.

12 أيام متتالية

عُد غداً للحفاظ على سلسلتك!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

ضعف أو لا شيء

اليوم 5 من 7

fire Freeze icon

تجميد السلسلة

2 left

برمج في أي مكان

خذ رحلة البرمجة معك أينما ذهبت! لا إعداد، لا تنزيلات - فقط افتح وابدأ البرمجة. متوفر على iOS وAndroid والويب بتقييم 4.9 نجوم.

Python
7السلسلة
250النقاط
5الطاقة
المتغيرات
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
متابعة
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
الرحلة
الأهداف
لوحة المتصدرين
الملف الشخصي
4.9
نجمةنجمةنجمةنجمةنجمة
التقييم

لست وحدك

تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!

دوري المتحدّين
دوري المتحدّينأفضل 7 يتقدمون
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconمنطقة الترقيةleaderboard Arrow Up icon

كل طريقة للتعلّم

اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.

مقدمة للمتغيّرات
صوت

المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.

في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.

يمكن أن تتغيّر القيمة بمرور الوقت - إعادة الإسناد ببساطة توجّه الاسم إلى قيمة جديدة.

1xSarah

احصل على شهادتك

احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على LinkedIn وسيرتك الذاتية لعرض خبرتك البرمجية لأصحاب العمل.

Coddyشهادة إتمام
يُشهد بأنمحمد أحمدقد أتمّ بنجاح
python iconأساسيات Python
موثّق
التاريخيناير 2026
LinkedInأضف إلى LinkedIn

لماذا تتعلم Next.js مع Coddy

  • ابنِ تطبيقات Next.js في متصفحك. لا تثبيت لـ Node ولا create-next-app ولا إعدادات - كل درس يمنحك مجلد app حقيقيًا فيه التخطيط والصفحات والمكوّنات لتعديلها.
  • App Router كما يُستخدم في الإنتاج: المجلدات كمسارات، والمقاطع الديناميكية، والتخطيطات المتداخلة، ومكوّنات الخادم مقابل العميل، وجلب البيانات، وحالات التحميل والخطأ، والنماذج مع server actions.
  • تلميحات ذكاء اصطناعي تقرأ كودك الفعلي. عندما يعيد مسار خطأ 404 أو يتعطل مكوّن خادم، تحصل على إشارة تدلّك على المشكلة دون كشف الإجابة.
  • شهادة مجانية عند إنهاء القسم - Next.js هو إطار React الأكثر طلبًا، وهو ما تطلبه إعلانات وظائف الواجهة الأمامية الحديثة إلى جانب React نفسها.

أسئلة شائعة حول تعلّم Next.js

ما هو Next.js؟

Next.js إطار عمل React لبناء تطبيقات ويب كاملة. تمنحك React المكوّنات، ويضيف Next.js كل ما حولها - التوجيه عبر نظام الملفات، والتخطيطات المتداخلة، والعرض على الخادم، وجلب البيانات، وserver actions للتعامل مع النماذج والتعديلات. تطوّره وتصونه شركة Vercel، وهو إطار React الأكثر استخدامًا في الإنتاج.

هل أحتاج إلى معرفة React قبل تعلّم Next.js؟

نعم - Next.js مبني على React، لذا ينبغي أن تكون المكوّنات وprops والحالة مألوفة لديك أولًا. هذا القسم هو الجزء الثاني من رحلة React: قسم الأساسيات الذي يسبقه يغطي هذه الأرضية بالضبط، فيمكنك المتابعة بالترتيب مباشرة.

هل تغطي الدورة App Router؟

نعم - القسم مبني حول App Router الحديث: مجلد app، والمجلدات كمسارات، ومقاطع المسارات الديناميكية، والتخطيطات المتداخلة، ونموذج مكوّنات الخادم/العميل. هذه هي البنية التي تستخدمها مشاريع Next.js الجديدة افتراضيًا وما تتوقعه إعلانات الوظائف الحالية.

ما الفرق بين مكوّنات الخادم ومكوّنات العميل؟

تُعرض مكوّنات الخادم على الخادم - يمكنها جلب البيانات مباشرة وترسل قدرًا أقل من JavaScript إلى المتصفح. أما مكوّنات العميل فتعمل في المتصفح وتتولى التفاعل: الحالة والأحداث والتأثيرات. تمزج تطبيقات Next.js بين النوعين، ومعرفة أيهما تختار هي إحدى المهارات الأساسية التي يدرّبها هذا القسم.

هل يمكنني تعلّم Next.js عبر الإنترنت مجانًا؟

نعم. قسم Next.js التفاعلي مجاني - دروس كاملة، وتحديات كود حقيقية بتغذية راجعة فورية، وتلميحات ذكاء اصطناعي. كل شيء يعمل في متصفحك، فلا تحتاج إلى تثبيت Node أو إنشاء مشروع للبدء.

هل أحصل على شهادة بعد دورة Next.js؟

نعم. عند إنهاء القسم تحصل على شهادة إتمام مجانية يمكنك مشاركتها على LinkedIn أو إضافتها إلى سيرتك الذاتية - إلى جانب مشروع Next.js الكامل الذي تبنيه في الفصول الأخيرة.

مسارات التعلّم التي تتضمن هذه الدورة

هذه الدورة خطوة واحدة من مسار أطول: عدة دورات بالترتيب الذي يدرّسها به مرشد، ولكلٍّ منها شهادة مجانية.

رسم توضيحي للغات البرمجة في Coddy

تعلم أساسيات Next.js مع Coddy

ابدأ الآن