مسار الصفحات (Pages Router)
دورة مسار التطبيق الجديدة: أنت تشاهد حاليًا دورة مسار الصفحات. يمكنك مشاهدة دورة مسار التطبيق الجديدة هنا.
لبناء تطبيق ويب كامل باستخدام React من الصفر، هناك العديد من التفاصيل المهمة التي تحتاج إلى أخذها في الاعتبار:
- يجب تجميع الكود باستخدام أداة مثل webpack وتحويله باستخدام مترجم مثل Babel.
- تحتاج إلى إجراء تحسينات للإنتاج مثل تقسيم الكود (code splitting).
- قد ترغب في تقديم بعض الصفحات مسبقًا بشكل ثابت (pre-render) لأداء أفضل وتحسين محركات البحث (SEO). قد ترغب أيضًا في استخدام عرض من جانب الخادم (SSR) أو عرض من جانب العميل (CSR).
- قد تحتاج إلى كتابة بعض الأكواد من جانب الخادم لربط تطبيق React بمخزن البيانات الخاص بك.
يمكن لإطار عمل (framework) أن يحل هذه المشكلات. ولكن يجب أن يكون هذا الإطار بمستوى التجريد الصحيح - وإلا فلن يكون مفيدًا جدًا. كما يحتاج إلى توفير "تجربة مطور" رائعة، مما يضمن لك وللفريق الخاص بك تجربة مذهلة أثناء كتابة الكود.
Next.js: إطار عمل React
ها هو Next.js، إطار عمل React. يوفر Next.js حلًا لكل المشكلات المذكورة أعلاه. ولكن الأهم من ذلك، يضعك وفريقك في حفرة النجاح عند بناء تطبيقات React.
يهدف Next.js إلى توفير أفضل تجربة مطور مع العديد من الميزات المدمجة، مثل:
- نظام توجيه قائم على الصفحات بديهي (مع دعم المسارات الديناميكية)
- التقديم المسبق، حيث يتم دعم كل من التوليد الثابت (SSG) وعرض من جانب الخادم (SSR) على أساس كل صفحة
- تقسيم الكود تلقائيًا لتحميل الصفحات بشكل أسرع
- التوجيه من جانب العميل مع جلب مسبق محسن
- دعم CSS مدمج ودعم Sass، ودعم لأي مكتبة CSS-in-JS
- بيئة تطوير مع دعم تحديث سريع
- مسارات API لبناء نقاط نهاية API مع دوال Serverless
- قابل للتوسيع بالكامل
يستخدم Next.js في عشرات الآلاف من مواقع الويب وتطبيقات الويب الموجهة للإنتاج، بما في ذلك العديد من أكبر العلامات التجارية في العالم.
حول هذا البرنامج التعليمي
هذه الدورة التفاعلية المجانية ستوجهك حول كيفية البدء مع Next.js.
في هذا البرنامج التعليمي، ستتعلم أساسيات Next.js من خلال إنشاء تطبيق مدونة بسيط جدًا. إليك مثال للنتيجة النهائية:
https://next-learn-starter.vercel.app (المصدر)
يفترض هذا البرنامج التعليمي معرفة أساسية بـ JavaScript و React. إذا لم تكن قد كتبت كود React من قبل، فيجب عليك أولاً الاطلاع على البرنامج التعليمي الرسمي لـ React.
إذا كنت تبحث عن وثائق بدلاً من ذلك، قم بزيارة وثائق Next.js.
انضم إلى المحادثة
إذا كان لديك أي أسئلة حول Next.js أو هذه الدورة، يمكنك طرحها على مجتمعنا على Discord.
لنبدأ!