حول React و Next.js

Next.js هو إطار عمل React مرن يوفر لك اللبنات الأساسية لإنشاء تطبيقات ويب سريعة وكاملة المكدس.

ولكن ما الذي نعنيه بهذا بالضبط؟ دعونا نقضي بعض الوقت في شرح ماهية React وNext.js وكيف يمكنهما مساعدتك في بناء تطبيقات الويب.

لبنات بناء تطبيق ويب

هناك بعض الأشياء التي تحتاج إلى مراعاتها عند بناء التطبيقات الحديثة. مثل:

• واجهة المستخدم - كيف سيتفاعل المستخدمون مع تطبيقك ويستخدمونه.
• التوجيه (Routing) - كيف يتنقل المستخدمون بين أجزاء تطبيقك المختلفة.
• جلب البيانات (Data Fetching) - مكان تخزين بياناتك وكيفية الحصول عليها.
• التصيير (Rendering) - متى وأين يتم تصيير المحتوى الثابت أو الديناميكي.
• التكاملات (Integrations) - خدمات الجهات الخارجية التي تستخدمها (لنظام إدارة المحتوى، المصادقة، المدفوعات، إلخ) وكيفية الاتصال بها.
• البنية التحتية (Infrastructure) - مكان نشر وتخزين وتشغيل كود التطبيق (خادمless، CDN، edge، إلخ).
• الأداء (Performance) - كيفية تحسين تطبيقك للمستخدمين النهائيين.
• القابلية للتوسع (Scalability) - كيف يتكيف تطبيقك مع نمو فريقك وبياناتك وحركة المرور.
• تجربة المطور (Developer Experience) - تجربة فريقك في بناء وصيانة التطبيق.

لكل جزء من تطبيقك، ستحتاج إلى اتخاذ قرار بشأن ما إذا كنت ستقوم ببناء الحل بنفسك أو استخدام أدوات أخرى مثل الحزم والمكتبات وأطر العمل.

ما هو React؟

React هو مكتبة JavaScript لبناء واجهات مستخدم تفاعلية.

بواجهات المستخدم (UI)، نعني العناصر التي يراها المستخدم ويتفاعل معها على الشاشة.

بالمكتبة، نعني أن React يوفر دوالًا (واجهات برمجة تطبيقات APIs) مفيدة لبناء واجهة المستخدم، لكنه يترك للمطور حرية اختيار مكان استخدام هذه الدوال في التطبيق.

جزء من نجاح React هو أنه غير متحيز نسبيًا تجاه الجوانب الأخرى لبناء التطبيقات. وقد أدى هذا إلى ازدهار نظام بيئي لأدوات وحلول الطرف الثالث، بما في ذلك Next.js.

ولكن هذا يعني أيضًا أن بناء تطبيق React كامل من الصفر يتطلب بعض الجهد. يحتاج المطورون إلى قضاء الوقت في تكوين الأدوات وابتكار حلول للمتطلبات الشائعة للتطبيقات.

ما هو Next.js؟

Next.js هو إطار عمل React يوفر لك اللبنات الأساسية لإنشاء تطبيقات ويب.

بإطار العمل، نعني أن Next.js يتعامل مع الأدوات والإعدادات المطلوبة لـ React، ويوفر بنية إضافية وميزات وتحسينات لتطبيقك.

يمكنك استخدام React لبناء واجهة المستخدم الخاصة بك، ثم اعتماد ميزات Next.js تدريجيًا لحل متطلبات التطبيق الشائعة مثل التوجيه وجلب البيانات والتخزين المؤقت - مع تحسين تجربة المطور والمستخدم النهائي.

سواء كنت مطورًا فرديًا أو جزءًا من فريق أكبر، يمكنك استخدام React وNext.js لبناء تطبيقات ويب تفاعلية بالكامل وديناميكية للغاية وعالية الأداء.

في الفصول القادمة، سنناقش كيفية البدء مع React وNext.js.