متى تستخدم إطار عمل مثل Next أو Gatsby مقابل الاطار Create React App

لا يتحوي create-react-app على كل المميزات التي قد تحتاجها في المشروع، فعلى سبيل المثال لا يتحتوي على طريقة إفتراضية لتغير المسارات routes ويجب عليك تثبيت حزم أخرى مثل react-router لكي تقوم بذلك، كما أنه لا يمكنك من توليد صفحات ثابتة static pages بسهولة، ولا يحتوي على ميزة SSR (Server Side Rendering) أو SSG (Static Site Generation) بشكل إفتراضي، مما قد يؤثر على السيو SEO الخاص بالموقع، وغيرها من الممزايات التي تجد نفسك في حاجة إليها في كل مشروع تقريبًا تقوم بعمليه.

ولحل مثل هذه المشاكل، ظهرت إطارات عمل مختلفة مبنية على React نفسه، مثل Next.js و Gatsby، ولكل منهما مميزات مختلفة، فعلى سبيل المثال يحتوي إطار العمل Next.js على العديد من المميزات منها:

• دعم TypeScript: لن تحتاج إلى الكثير من الخطوات لتستطيع أن تستخدم TypeScript في المشروع
• pre-rendering SSR + SSG : يدعم Next.js ما يسمى Hybrid أي أنه يقوم بتحويل الصفحات الثابتة إلى SSG تلقائيًا والصفحات الأخرى تكون من نوع SSR
• file-system routing: لن تحتاج إلى تثبيت حزم خارجية لكي تقوم بعمل Route System، فقط قم بتنظيم الملفات بالطريقة التي تريد وستجد أن كل المسارات تعمل بنفس طريقة ترتيب الملفات والمجلدات داخل بعضها البعض.
• zero config: لا يوجد أي إعدادات تحتاج إن أن تقوم بعملها لكي يعمل المشروع بكفاءة، فقط أكتب الكود وشاهد النتيجة في المتصفح مباشرة.
• Image Optimization: يمكن لإطار العمل Next.js ضغط وإعادة تحجيم الصور لتقليل حجم النطاق الترددي Bandwidth إلى أقصى حد من خلال عمل مكون Image مخصص.
• code splitting: يقوم Next.js بتقسيم الكود إلى ملفات صغيرة تسمى chunks ويتم تحميل الكود المطلوب فقط إلى المتصفح، وبالتالي يتم تحميل الصفحات بشكل أسرع وعرض النتيجة في وقت أقل.

لذلك أنتقل الكثير من مطوري React.js إلى إستخدام Next.js وGatsby بسبب المميزات التي يقدمها.