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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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