تعلّم Next.js
دورة Next.js مجانية وتفاعلية تنقلك من مكونات React إلى تطبيق حقيقي: التوجيه والتخطيطات ومكونات الخادم والعميل وجلب البيانات وserver actions. تساعدك تلميحات الذكاء الاصطناعي عندما تتعثر، وتحصل على شهادة مجانية عند الانتهاء.
47 درسًا41 تحديات99 أسئلة الاختبار
- مناسب للمبتدئين
مساعدة برمجية بالذكاء الاصطناعي
دروس تفاعلية عملية
اختبارات لقياس معرفتك
شهادة إتمام مجانية
المنهج
هذا القسم جزء من رحلة React. المنهج الكامل يحتوي على أقسام أكثر: اضغط على أي معاينة أدناه لعرضها في صفحة الرحلة.
- قسم 1الأساسيات42 درسًا
قسم 2
أساسيات Next.js
ابدأ القسمابدأانتقل من مكونات React إلى تطبيق حقيقي: التوجيه عبر نظام الملفات (file-system routing)، والتخطيطات (layouts)، ومكونات الخادم والعميل (server and client components)، وجلب البيانات (data fetching)، وإجراءات الخادم (server actions)، ومشروع Next.js مكتمل.لماذا Next.js
4 درسًا39التوجيه والروابط
6 درسًا516التخطيطات والبيانات الوصفية
6 درسًا515الخادم والعميل (Server & Client)
6 درسًا515البيانات على الخادم
6 درسًا516إجراءات الخادم (Server Actions)
5 درسًا413التنقل من جانب العميل
5 درسًا515مشروع: كودي يأكل (Coddy Eats)
9 درسًا9
تعلّم بالممارسة
اكتب أكواداً حقيقية، واستعلم من قواعد البيانات، وأنشئ مواقع ويب، وأتقن أوامر الذكاء الاصطناعي. دروسنا التفاعلية تغطي كل المهارات التي يحتاجها المطورون المعاصرون.
ابنِ سلسلتك
حافظ على الاستمرارية وشاهد تقدمك ينمو! تابع عادة البرمجة اليومية، واحمِ سلسلتك بأيام التجميد، واكسب مكافآت لحضورك كل يوم.
12 أيام متتالية
عُد غداً للحفاظ على سلسلتك!
January 2026
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
ضعف أو لا شيء
اليوم 5 من 7
تجميد السلسلة
2 left
برمج في أي مكان
خذ رحلة البرمجة معك أينما ذهبت! لا إعداد، لا تنزيلات: فقط افتح وابدأ البرمجة. متوفر على iOS وAndroid والويب بتقييم 4.9 نجوم.
لست وحدك
تنافس على لوحات المتصدرين العالمية، وادعُ أصدقاءك لكسب المكافآت، واحتفلوا بإنجازات بعضكم. البرمجة أفضل مع الأصدقاء!
كل طريقة للتعلّم
اقرأ، استمع، اختبر نفسك، اسأل الذكاء الاصطناعي، أو ابحث عما درسته من قبل. كل درس يتكيّف معك.
المتغيّر حاوية مسمّاة تخزّن قيمة يمكن الرجوع إليها لاحقًا في برنامجك.
في بايثون، تُنشئ واحدًا بكتابة الاسم ثم علامة يساوي ثم القيمة التي تريد تخزينها.
يمكن أن تتغيّر القيمة بمرور الوقت. إعادة الإسناد ببساطة توجّه الاسم إلى قيمة جديدة.
احصل على شهادتك
احصل على شهادات لكل دورة تكملها. أضفها إلى ملفك على 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 الكامل الذي تبنيه في الفصول الأخيرة.