شبكة تعلم مع ناو

خطوة بخطوة نحو الهدف

تيليجرام

مسار تعلم · تطوير الويب

NextJS Framework

تعلّم إنشاء مواقع مختلفة من خلال استخدام إطار عمل NextJS وذلك بإنشاء مشاريع مصغرة ومبسطة.

  • 58 خطوة
  • 56 فيديو
  • المستوى: متوسط
  • محتوى مكتمل
  • آخر تحديث: يونيو 2024
ابدأ المسار ←

خريطة المسار

  1. أساسيات NextJS6 خطوات
  2. أساسيات استخدام Strapi CMS (اختياري)خطوة واحدة
  3. بناء مشروع متكامل(Recipes Project) – الجزء الأول16 خطوة
  4. بناء مشروع متكامل(Recipes Project) – الجزء الثاني19 خطوة
  5. Dashboard App Project10 خطوات
  6. Dashboard Backend6 خطوات
  7. أنهيت المسارأحسنت، وصلت إلى النهاية

مصادر المسار

خطوات المسار

تقدمك في المسار

0 من 58 خطوة

0%

ابدأ المسار ←

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

100 أساسيات NextJS

6 خطوات

تعلّم أساسيات استخدام إطار عمل NextJS بخطوات بسيطة.

  1. 101 ٍOur Space Project فيديو

    ابدأ بتعلم NextJS بإنشاء صفحة بسيطة يتم عرض فيها صور من الفضاء مع إضافة لمسة CSS Parallax بسيطة.

  2. 102 Random Advice Project فيديو

    سنتعلم من خلال هذا المشروع حول CSR أو Client Side Rendering، وكيفية قيام Next JS بتحميل الصفحة بالمقارنة مع React JS.

  3. 103 Courses Project فيديو

    ما هو Server Side Rendering؟ وكيفية استخدامه في NextJS؟ ما هي getServerSide Props؟ كيفية تحسين سيو الموقع بتطبيقات NextJS.

  4. 104 Courses Project 2 فيديو

    ما هي getStaticProps؟ وما الفرق بين getServerSideProps و getStaticProps؟ ومتى يجب استخدام كل منها؟ وكيف يتم build Next App؟

  5. 105 Gallery Project فيديو

    كيفية استخدام Image Tag وشرح خصائصه المختلفة، وأيضاً القيام بإنشاء معرض صور كمشروع تطبيقي بسيط.

  6. 106 Next Font فيديو

    كيفية تحميل الخطوط المختلفة من خطوط الغوغل إلى الخطوط المحلية في مشروع NextJs.

200 أساسيات استخدام Strapi CMS (اختياري)

خطوة واحدة

  1. 200 نظرة عامة على القسم رابط

    الرجاء الذهاب لمسار تعلم Headless CMS، وتتبع الفيديوهات الخاصة بـــِ بأساسيات تعلم Strapi Headless CMS. في الخطوات القادمة، سنقوم ببناء مشروع NextJS متكامل مبني على Strapi Backend.

300 بناء مشروع متكامل(Recipes Project) – الجزء الأول

16 خطوة

سنقوم ببناء مشروع NextJS متكامل ووصله مع سيرفر Strapi. سنبدأ مع ربط الموقع مع نقاط Strapi API. وثم بناء نظام تسجيل دخول للموقع مبسط، مع إدارة لصور الموقع.

  1. 301 مقدمة المشروع وعرض كل الوصفات فيديو

    سنقوم بترتيب ملفات المشروع الرئيسية. كما سيتم الربط مع نقطة جلب كل الوصفات من Strapi، وعرضها على صفحة المشروع الرئيسية.

  2. 302 إنشاء صفحة الوصفة الأحادية فيديو

    كيفية إنشاء صفحة أحادية للوصفة وجلب معلومات الوصفة الواحدة من جهة السيرفر.

  3. 303 إضافة وصفة جديدة فيديو

    كيفية إضافة وصفة جديدة وإرسالها لجهة السيرفر وكيفية إضافة authorized access token للمشروع.

  4. 304 حذف وصفة فيديو

    بناء زر حذف وصفة في الواجهة الأمامية وإرسال طلب حذف الوصفة لجهة السيرفر.

  5. 305 صفحة وطلب تعديل الوصف فيديو

    كيفية بناء صفحة تعديل الوصفة مع النموذج الخاص بها وأيضاً تغيير ترتيب عرض الوصفات.

  6. 306 بناء Header Component فيديو

    سنبدأ ببناء Authentication System، يٌمكّن المستخدمين من القيام بالمهام المخولة لهم بعد تسجيل الدخول. البداية ستكون بإنشاء Header Component بسيطة.

  7. 307 بناء صفحة تسجيل الدخول فيديو

    بناء صفحة تسجيل الدخول مع Login Form، حيث سيتم تشغيل هذا النموذج وإرسال طلب تسجيل الدخول لــ Strapi Backend.

  8. 308 التعامل مع localStorage فيديو

    كيفية حفظ JWT في localStorage، وكيفية التعامل مع خطأ Reference Error: localStorage is not defined.

  9. 309 HTTP Only Cookie فيديو

    توضيح بعض المفاهيم المتعلقة بالسيرفر بشكل عام، وسيرفر NextJS بشكل خاص. وكما تم توضيح كيفية حفظ JWT في HTTP Only Cookie وتطبيق ذلك على نقاط تسجيل الدخول والخروج.

  10. 310 ُAdd Recipe API Point فيديو

    سنبدأ بإضافة نقطة API جديدة في تطبيق NextJS لإضافة وصفة جديدة، وثم سنرسل طلب إضافة وصفة لــِ backend من هذه النقطة.

  11. 311 Edit & Delete Recipe API Point فيديو

    إضافة نقاط API الخاصة بتعديل وحذف الوصفة، وإرسال طلبات لــ backend من هذه النقاط.

  12. 312 isLoggedIn API Point فيديو

    سنقوم بإنشاء نقطة جديدة في NextJS API تحدد إذا كان المستخدم مسجل الدخول أم لا. أيضاً قمنا بإنشاء useUser Hook لحماية بعض المسارات من الدخول غير المخول به على جهة client.

  13. 313 useUser & Redirect فيديو

    سيتم استخدام useUser Hook لحماية بعض الصفحات من الدخول غير المخول به على جهة Client. أيضاً سنقوم بإعادة توجيه الزوار بعد تسجيل الدخول والخروج للصفحة المناسبة.

  14. 314 My Recipes API Point فيديو

    تعديل بعض الصلاحيات من جهة Strapi، وإنشاء نقطة API جديدة لعرض الوصفات الخاصة بمؤلف محدد.

  15. 315 ٍSave User in Cookies فيديو

    عرض وصفات المستخدم، وحفظ معلومات المستخدم في Cookies و حذفها عند تسجيل الدخول.

  16. 316 Register User فيديو

    إنشاء صفحة التسجيل في الموقع مع النموذج الخاص بها. أيضاً سيتم بناء نقطة Register وإرسال طلب لــِ backend لتسجيل المستخدم وعرض أخطاء التسجيل و تسجيل الدخول على الواجهة الأمامية.

400 بناء مشروع متكامل(Recipes Project) – الجزء الثاني

19 خطوة

في هذا الجزء من مشروع Recipes سنقوم ببناء الواجهة الأمامية (FrontEnd). يشمل ذلك استخدام CSS Styles والقيام بـــِ Form Validation.

  1. 401 Layout Component & Theme فيديو

    سيتم إنشاء Layout Component مع إضافة Title & Description Tags. أيضاً سيتم إنشاء Page Header Component مع إضافة قالب وألوان افتراضية للموقع.

  2. 402 Recipe Card Styling فيديو

    سنقوم بالتعديل على Recipe Container & Recipe Card في الصفحة الرئيسية، وسنضيف بعض من Styling لها.

  3. 403 التعامل مع الكلمات والترجمات فيديو

    نتحدث عن كيفية التعامل مع strings في أي مشروع، وما هي سلبيات وإيجابيات الطرق المختلفة. كما إننا سنقوم بفصل هذه strings في ملف خاص.

  4. 404 Fonts & formatDate & Single Recipe Page فيديو

    سنقوم باستخدام خطوط الغوغل في مشروعنا، وأيضاً سيتم إضافة أدوات مساعدة للمشروع. كما سيتم تعديل صفحة الوصفة الأحادية لتظهر بشكل أفضل.

  5. 405 Edit Recipe Form & Header فيديو

    في هذا الدرس، سنقوم بتعديل نموذج الوصفة والهيدر. سنضيف بعض من CSS Classes له، وأيضاً سنضيف Arabic Strings له.

  6. 406 Style Recipe Form فيديو

    في هذه الخطوة سننهي الشكل العام لمشروع Recipe بإضافة ستايلات لــِ Recipe Form.

  7. 407 مقدمة حول Validation and Sanitization فيديو

    ما هو Validation؟ وما هي أهميته في الموقع الإلكتروني؟ ما هو Sanitization؟ وكيف يتم تطبيقه؟

  8. 408 Login Form Validation فيديو

    التحقق من صحة البيانات المدخلة في Login Form، وأيضاً التحقق من صحة البريد الإلكتروني المدخل من خلال Regex Pattern. كما تم إضافة بعض الستايلات وعرض رسائل الخطأ.

  9. 409 Register Form Validation فيديو

    سنقوم بالتحقق من صحة البيانات المدخلة في نموذج إنشاء حساب. وكذلك سنقوم بتنظيف الفراغات المرسلة مع حقول نموذج إنشاء حساب.

  10. 410 Recipe Form Validation فيديو

    سنقوم بالتحقق من صحة البيانات المدخلة في Recipe Form، كما سنقوم بـــ sanitization باستخدام trim function.

  11. 411 Refactor & Thumbnail Field Preview فيديو

    بداية نقوم بإعادة ترتيب Recipe Form Messages، وثم إضافة حقل الصورة المصغرة مع معاينتها في نموذج الوصفة.

  12. 412 رفع الصورة للسيرفر فيديو

    سنرفع الصورة لسيرفر Strapi من NextJS ونعرض رسائل الخطأ و النجاح الخاصة بعملية الرفع.

  13. 413 Display Thumbnails فيديو

    سنقوم بعرض الصورة المصغرة أو البارزة لكل وصفة في الصفحة الرئيسية وصفحة الوصفة الأحادية.

  14. 414 مفهوم Pagination فيديو

    في هذا الدرس سنستعرض سوية مفهوم Pagination أو تجزئة القيود ضمن صفحات. كما سيتم إنشاء Pagination Component.

  15. 415 Pagination Functionality فيديو

    في هذا الدرس: سيتم إضافة Pagination Functionality، وسيتم طلب الصفحات من Backend وعرضها في واجهة Next JS.

  16. 416 الترتيب حسب التاريخ فيديو

    يتم إضافة خاصية ترتيب الوصفات بشكل تصاعدي أو تنازلي حسب تاريخ التحديث، وذلك باستخدام qs و خاصية strapi لــِ filtering and searching.

  17. 417 ٍمربع البحث | Search Box فيديو

    يتم توضيح طريقة التصفية والبحث والترتيب المتبعة وأيضاً كيفية إضافة مربع البحث للموقع وجعله يعمل بشكل حقيقي.

  18. 418 الفلترة حسب المدة الكلية والوجبة فيديو

    في هذا الدرس، سنضيف خاصية التصفية حسب الوجبة وحسب المدة الكلية لتحضير الوصفة.

  19. 419 تحسين Filter Box فيديو

    قمنا بتحسين صندوق التصفية عن طريق تحسين وظيفة البحث والتصفية بشكل كبير. مع الاهتمام الدقيق باحتياجات المستخدم، قمنا بتنفيذ مجموعة من الترقيات لتبسيط عملية العثور على النتائج المرغوبة وتنقيتها.

500 Dashboard App Project

10 خطوات

سنبدأ بمشروع جديد يختص ببناء لوحة تحكم لإضافة مقالات المستخدم، ستبدأ الدروس بتوضيح حول كيفية استخدام app Directory بإصدار NextJS الجديد.

  1. 501 NextJS App Directory فيديو

    مفهوم app directory الجديد، متى يتم استخدامه وما هي فكرته الأساسية بـــ NextJS.

  2. 502 ٌRoutes and Pages فيديو

    في هذا الدرس سنتعلم كيفية إنشاء مسارات مختلفة في مشروع NextJS، وأيضاً سنوضح استخدامات ملفات page و layout.

  3. 503 بناء صفحة لوحة التحكم الأساسية فيديو

    سنقوم ببناء لوحة التحكم الرئيسية بما يتضمن navigation bar و Dashboard Cards.

  4. 504 بناء صفحة المقالات و Data Grid Component فيديو

    في هذه الخطوة سنقوم ببناء صفحة المقالات في لوحة التحكم، كما سنقوم أيضاً ببناء تكوين Data Grid.

  5. 505 مكون Filter Box فيديو

    سنقوم بإنشاء مكون مربع بحث لفلترة المقالات وتحسين تجربة المستخدم في البحث والتصفية، كما سنتعلم المزيد عن التعامل مع server and client components في NextJs.

  6. 506 إنشاء مكوّن Pagination فيديو

    في هذا الدرس، سنقوم بإنشاء مكون pagination في تطبيق NextJs باستخدام app directory.

  7. 507 بناء نقاط API فيديو

    تعلّم كيفية إنشاء نقاط واجهات برمجة تطبيقات متعددة باستخدام NextJS. تتضمّن المواضيع طلبات الحصول، الحذف، التحديث والإرسال للمقالات

  8. 508 إدارة المقالات من إضافة، تعديل وحذف فيديو

    في هذا الدرس سنقوم بوصل عمليات المقالات المختلفة من قراءة وإضافة وحذف وتعديل مع نقاط API المختلفة التي تم إنشائها مسبقاً. كما سنتعلم بعض الوظائف الجديدة في إصدار next الجديد.

  9. 509 إضافة خاصية تسجيل الدخول فيديو

    في هذا الدرس سنقوم ببناء صفحة ونموذج تسجيل الدخول بالموقع وأيضاً سنقوم بحفظ معلومات تسجيل الدخول بـــ httpOnly Cookie.

  10. 510 إضافة خاصية تسجيل الخروج فيديو

    بناء وظيفة تسجيل الخروج من الموقع مع إنشاء redirect وحماية صفحات الموقع من الدخول غير المصرح به.

600 Dashboard Backend

6 خطوات

في هذا القسم سنقوم بإنشاء Backend لتطبيق NextJS باستخدام لغة PHP وقاعدة بيانات MySQL. ثم سنقوم بوصل هذه Backend مع تطبيق NextJS.

  1. 601 إنشاء قاعدة بيانات و PHP Backend فيديو · كود

    في هذا الدرس، سنقوم بإنشاء قاعدة البيانات ونقاط PHP API مختلفة لإدارة المقالات والمستخدمين.

  2. 602 ربط تطبيق NextJS مع Backend فيديو

    في هذا الدرس، سنقوم بالتعديل على نقاط Next API حتى تصل مع Backend PHP API وقاعدة بيانات MySQL.

  3. 603 ترقية PHP Backend رابط

    هذا عبارة عن مسار تعليمي آخر وأيضاً سلسلة فيديوهات تعليمية خاصة بكيفية بناء API Backend باستخدام لغة PHP. هذه الخطوة اختيارية لكن يفضل أن تتعلم الخطوات من 100 لــ 107.

  4. 604 تفعيل نقطة Login & Logout فيديو

    في هذه الخطوة قمنا بتفعيل خاصية تسجيل الدخول لتتصل مع قاعدة البيانات، وكذلك قمنا بتعديل نقاط الحصول على كل المقالات ومقالة أحادية لتستخدم Backend PHP المحدثة.

  5. 605 Middlewares & Headers فيديو

    سنقوم بإضافة middleware لحماية المسارات بتسجيل الدخول، وأيضاً سنمرر token في headers لــ backend, كما سيتم إنشاء مكون جديد لعرض معلومات الشخص المسجل الدخول في صفحة profile.

  6. 606 Pagination Search Params فيديو

    تم فعلياً القيام بتمرير معلومات pagination و الفلترة والبحث من nextjs لـــ php backend من خلال search params