الفصل الأول: مقدمة إلى Next.js

• ما هو Next.js؟
  • نظرة عامة على Next.js ومميزاته.
  • لماذا تختار Next.js على الأطر الأخرى؟
  • التطبيقات الواقعية لـ Next.js.
• المتطلبات الأساسية
  • المعرفة الأساسية بـ JavaScript وReact وNode.js.
  • البرامج المطلوبة (Node.js، npm/yarn).
  • إعداد بيئة التطوير (VS Code أو أي محرر مفضل).

الفصل الثاني: إعداد مشروع Next.js

• تثبيت Next.js
  • إنشاء مشروع Next.js جديد باستخدام npx create-next-app.
  • نظرة عامة على بنية الدليل.
  • استخدام TypeScript مع Next.js.
• فهم بنية الملف
  • دليل الصفحات ونظام التوجيه.
  • الدليل العام للأصول الثابتة.
  • دليل API للمسارات الخلفية.

الفصل الثالث: بناء صفحتك الأولى

• إنشاء الصفحات
  • مقدمة إلى مجلد الصفحات.
  • إنشاء الصفحات وربطها.
  • التنقل بين الصفحات باستخدام الرابط التالي.
• التوجيه الديناميكي
  • إنشاء مسارات ديناميكية باستخدام [param].
  • التوجيه المتداخل وحالات استخدامه.
• فهم العرض المسبق
  • الإنشاء الثابت مقابل العرض من جانب الخادم.
  • كيفية استخدام getStaticProps وgetServerSideProps.

الفصل الرابع: التصميم في Next.js

• وحدات CSS
  • كيفية استخدام وحدات CSS لتصميم النطاق.
  • إدارة CSS العالمية.
• المكونات المصممة
  • إعداد المكونات المصممة في Next.js.
  • إدارة الموضوع.
• استخدام Sass مع Next.js
  • تثبيت وتكوين ساس.
  • أفضل الممارسات لاستخدام Sass في مشروع Next.js.

الفصل الخامس: جلب البيانات في Next.js

• جلب البيانات من جانب العميل
  • استخدام الجلب والمحور لجلب البيانات في المكون.
• جلب البيانات من جانب الخادم
  • استخدام getServerSideProps للعرض من جانب الخادم.
• جلب البيانات الثابتة
  • استخدام getStaticProps وgetStaticPaths لإنشاء ثابت.
  • التجديد الثابت المتزايد (ISR) للمحتوى الديناميكي.

الفصل السادس: مسارات API في Next.js

• إنشاء مسارات واجهة برمجة التطبيقات
  • نظرة عامة على دليل API.
  • إنشاء واجهات برمجة تطبيقات RESTful بسيطة.
• التعامل مع طلبات واجهة برمجة التطبيقات
  • فهم كائنات الطلب والاستجابة.
  • معالجة الأخطاء وأكواد الاستجابة.

الفصل السابع: استخدام Next.js مع نظام إدارة المحتوى (CMS).

• إعداد نظام إدارة المحتوى
  • لماذا نستخدم نظام إدارة المحتوى (CMS) مع Next.js؟
  • التكامل مع خيارات نظام إدارة المحتوى الشائعة (WordPress وContentful وSanity وما إلى ذلك).
• جلب بيانات نظام إدارة المحتوى في Next.js
  • كيفية ربط نظام إدارة المحتوى (CMS) الخاص بك بـ Next.js.
  • إدارة المحتوى الديناميكي باستخدام نظام إدارة المحتوى.

الفصل الثامن: Next.js والمصادقة

• تنفيذ المصادقة
  • استراتيجيات المصادقة في Next.js.
  • استخدام رموز JWT وملفات تعريف الارتباط وإدارة الجلسة.
• مصادقة الطرف الثالث
  • إعداد موفري OAuth (Google، GitHub).
  • استخدام مكتبات مثل NextAuth.js للمصادقة.

الفصل التاسع: تحسين الأداء

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

الفصل العاشر: تحسين محركات البحث في Next.js

• فهم تحسين محركات البحث في Next.js
  • أهمية تحسين محركات البحث لتطبيقات Next.js.
• العلامات الوصفية والرسم البياني المفتوح
  • استخدام التالي/الرأس لعلامات تحسين محركات البحث.
  • إعداد علامات الرسم البياني المفتوح وبطاقة تويتر.
• إنشاء خرائط الموقع وملف Robots.txt
  • إنشاء خرائط مواقع ديناميكية.
  • استخدام ملف robots.txt لبرامج الزحف.

الفصل 11: نشر Next.js

• منصات النشر
  • Vercel: النظام الأساسي الموصى به لـ Next.js.
  • المنصات الأخرى: AWS، وNetlify، وDigitalOcean.
• النشر إلى Vercel
  • دليل خطوة بخطوة لنشر تطبيقك على Vercel.
• التهيئة للإنتاج
  • متغيرات البيئة في Next.js.
  • أفضل الممارسات لتطبيق Next.js الجاهز للإنتاج.

الفصل 12: التكوين المتقدم والتخصيص

• تخصيص تكوين Webpack
  • استخدام next.config.js للتكوين المتقدم.
  • إضافة أدوات تحميل Webpack والمكونات الإضافية المخصصة.
• خادم مخصص
  • متى يجب استخدام خادم مخصص.
  • تنفيذ خادم مخصص بتقنية Express.

الفصل 13: إدارة الدولة في Next.js

• مقدمة في إدارة الدولة
  • متى ولماذا يتم استخدام إدارة الحالة في Next.js.
  • خيارات لإدارة الحالة (React context، Redux، Recoil، Zustand).
• استخدام واجهة برمجة تطبيقات سياق التفاعل
  • إعداد حالة عالمية باستخدام سياق التفاعل.
  • حالة المرور بين المكونات.
• دمج Redux مع Next.js
  • إعداد Redux باستخدام Next.js.
  • حالة التعامل مع البيئات من جانب الخادم والعميل.

الفصل 14: الاختبار في Next.js

• لماذا اختبار تطبيقات Next.js؟
  • أهمية الاختبار وأنواع الاختبار المختلفة.
  • نظرة عامة على أدوات الاختبار (Jest، مكتبة اختبار React، Cypress).
• اختبار الوحدة باستخدام Jest
  • إعداد Jest في مشروع Next.js.
  • اختبارات وحدة الكتابة للمكونات والوظائف المساعدة.
• اختبار التكامل مع مكتبة اختبار React
  • اختبار المكونات والصفحات باستخدام مكتبة اختبار React.
  • الاستهزاء بجلب البيانات واستدعاءات واجهة برمجة التطبيقات.

خاتمة

• الأفكار النهائية
  • ملخص للوجبات الرئيسية.
  • موارد لمزيد من التعلم.
  • تشجيع القراء على استكشاف وتجربة Next.js.

لمزيد من التعلم المتعمق، تابع رحلتك هنا.