Next.js والحالة الراهنة لتطوير الويب باستخدام React

قد يكون بدء مشروع جديد تجربة ممتعة ومرهقة في آنٍ واحد. فهو ممتع لأنه يتيح لنا البدء من جديد، وتحسين أدائنا، وتجنّب أخطاء الماضي. لكنه مرهق لأن علينا اتخاذ قرارات تقنية كثيرة واختيار الأداة المناسبة للمهمة من بين عدد لا يُحصى من حزم npm ومستودعات Github ومشاريع المجتمع والقوالب الأولية للمشاريع.

كلما قلّت القرارات التي علينا اتخاذها بشأن البنية التقنية، زادت قدرتنا على التركيز على بناء الميزات وتقديم منتجات رائعة وتحسينها بوتيرة أسرع.

React وحدها لا تكفي#

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

لحسن الحظ، سبقنا آخرون إلى خوض هذه التجربة، وأصبحت لدينا الآن نقاط انطلاق متكاملة لإنشاء مواقع وتطبيقات ويب مبنية على React.

قوالب React الأولية وإرهاق اتخاذ القرارات#

تذكر وثائق React الرسمية ثلاثة أطر عمل أساسية للبدء بمشروع React جديد. وهذه الأطر الثلاثة هي Create React App, Next.jsو Gatsby.

هل ينبغي أن نتعلم ثلاثة أطر عمل مختلفة مبنية على React، ولكل منها أعرافها وأدواتها وخصائصها؟ كيف نقرر الأداة المناسبة للمهمة؟ ألا يمكننا اعتماد أحدها حلًا أساسيًا في 99٪ من الحالات؟

نعم، يمكننا ذلك. يمكن أن يكون Next.js، بحالته الحالية (الإصدار 12)، الحل الأساسي لأي موقع ويب تقريبًا مبني على React.

ما هو Next.js؟#

Next.js إطار عمل لـ React، بهندسة برمجية متينة تتمحور حول React. صُمم وفق نهج يحدد بعض الخيارات مسبقًا، ويضمّن في بنيته معظم القرارات التقنية. ونتيجة لذلك، تعمل كثير من الأمور المعقدة فورًا دون إعداد إضافي.

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

يمكننا قول الأمر نفسه عن Create React App وGatsby. لكن Create React App يعتمد على كثير من حزم البرامج مفتوحة المصدر التابعة لجهات خارجية كي يعمل، بينما يركز Gatsby بشدة على حالة استخدام واحدة محددة، وهي إنشاء المواقع الثابتة. صحيح أن Gatsby يقدم حاليًا دعمًا أفضل لإنشاء المواقع الثابتة، لكن يمكننا تحقيق وظائف مشابهة باستخدام Next.js.

فيمَ يُستخدم Next.js؟#

باستخدام Next.js، يمكننا إنشاء مواقع وتطبيقات ويب باستخدام React. ويتيح Next.js ما يلي:

• تقديم تطبيق React أحادي الصفحة، مع تقسيم الشيفرة وتحميل المحتوى الإضافي ديناميكيًا فورًا دون إعداد
• عرض المحتوى من جهة الخادم
• إنشاء مواقع ثابتة بإمكانات تضاهي Gatsby
• ليكون الهيكل الأساسي لتطبيق واجهة أمامية معقد ومخصص، مثل TeleportHQ (المزيد عن ذلك لاحقًا بقليل)

التفكير الاستراتيجي في Next.js#

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

يتمتع Next.js بمكانة استراتيجية ممتازة:

• يحظى بدعم قوي ونشط من Vercel، التي تحتاج إلى نمو Next.js كي تنجح في تنمية أعمالها السحابية.
• مضت على إطلاقه سنوات كافية ليبلغ مستوى من الاستقرار والنضج يشجع على اعتماده سريعًا، ويتيح له معالجة مجموعة واسعة من حالات الاستخدام والمشكلات اليومية.
• تتم صيانته وتطويره بنشاط، مع توسيع آفاق ما يمكن تحقيقه بتقنيات الويب مع كل إصدار جديد.
• تجربة التطوير فيه ممتازة إلى حد أن إطار عمل فرعيًا يُدعى Nuxt قد أُنشئ، ويعمل باستخدام Vuejs بدلًا من React ويستهدف الجمهور نفسه الذي يستهدفه Next.

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

للسبب نفسه، يُعد خيارًا ممتازًا للأتمتة باستخدام أدوات البرمجة منخفضة التعليمات البرمجية أو من دونها. فمن الأسهل إنشاء موقع كامل تلقائيًا عندما تكون بنيته محددة ومدعومة من إطار العمل الذي يشغّله.

استخدام نكست.جي إس#

وثائق نكست.جي إس ممتازة، ولن يكون من الإنصاف بحق نكست.جي إس إعادة صياغة عشرات الصفحات من المحتوى في مقالة موجزة. بدلًا من ذلك، سنعرض بإيجاز كيفية إعداد المشروع ونشير إلى صفحات الوثائق المناسبة.

سيعرض هذا القسم آلية عمل نكست.جي إس، ويركز على الجوانب التي تميّزه. وهو بالتأكيد ليس درسًا إرشاديًا خطوة بخطوة.

إعداد المشروع#

بدء مشروع جديد باستخدام نكست.جي إس في غاية السهولة. أولًا، لدينا الأمر create-next-app ، ويمكننا استخدامه لتهيئة كل شيء. دعم تايب سكريبت مُرضٍ، ويمكن تفعيله عند إعداد المشروع أو لاحقًا.

التوجيه والصفحات#

يُعد نظام التوجيه أحد الجوانب التي يفرض فيها نكست.جي إس نهجًا محددًا. يحدد هيكل المجلدات عناوين URL المدعومة وكيفية عرض الصفحات عند الوصول إليها. وتوجد الصفحات إما في pages أو src/page.

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

والأفضل من ذلك أن لكل صفحة حزمة جافاسكريبت خاصة بها، لذا فإن وجود ألف صفحة بمكونات ووظائف مختلفة لن يؤدي إلى زيادة حجم كل صفحة.

تتمتع طريقة عمل الصفحات في Next.js بقدرات كبيرة؛ فكل صفحة أشبه بنقطة دخول إلى التطبيق. تحدد الصفحات تبعيات البيانات الخاصة بها، وما إذا كان ينبغي جلبها أثناء التشغيل على الخادم أو على جانب العميل، أو توفيرها بشكل ثابت وإنشاء النتائج بصيغة HTML ثابتة.

التنسيق وCSS#

يتوفر دعم مدمج لأساسيات CSS ووحدات CSS.

بما أن Next.js يستخدم webpack في الخلفية لتجميع التطبيق، يمكن إضافة أي إطار عمل CSS متوافق مع React إلى مشاريع Next.js. بالإضافة إلى ذلك، توفر أطر العمل الشائعة مثل Tailwind أدلة حول كيفية استخدامها ضمن قواعد شيفرة Next.js.

بما أننا نعمل باستخدام مكونات React ونجمع الأصول عبر سلاسل أدوات التجميع التقليدية، فإن تجربة المطور مع CSS هي نفسها في أي قاعدة شيفرة أخرى لـ React.

الأداء#

من أبرز ما يميز Next عن الأطر الأخرى سرعة المواقع المبنية باستخدامه. ويتحقق الأداء عبر اعتماد أسلوب محدد لتجميع الصفحات وتوجيهها، إلى جانب تحسينات جاهزة لكل صفحة، استنادًا إلى الوظائف المستخدمة. فعلى سبيل المثال، ستُعامل الصفحة التي لا تعرّف أبدًا أي خصائص على جانب الخادم بطريقة تختلف عن الصفحة التي تعرّفها.

وبفضل التعاون مع Google، وُلد المكوّن Next/Image ، الذي يضم أفضل الممارسات لتحسين الصور والتحميل الكسول افتراضيًا. ويُعد هذا المكوّن تغييرًا منعشًا مقارنةً بترقيع المكوّنات الخارجية ودمجها في صميم المشروع. فعلى الرغم من أهمية تحسين الصور، غالبًا ما يغفل عنه مطورو الأطر، ويضطر مطورو المشاريع إلى الاعتماد على حلول خارجية تتطلب اتخاذ قرارات مختلفة، وتوفر خيارات كثيرة جدًا ومعقدة للاختيار من بينها.

بل يتوفر أيضًا خيار إنشاء تصدير لموقع ثابت بالكامل يستغني عن وظائف جانب الخادم وينشئ محتوى ثابتًا فقط، يمكننا استضافته على شبكة توصيل المحتوى بصيغ HTML وCSS وJS.

التجارة الإلكترونية#

تُعد المتاجر الإلكترونية من المجالات التي يكون فيها الأداء وسرعة تحميل الصفحات وسلاسة التصفح أمورًا بالغة الأهمية. ويمكن أن تؤدي زيادة سرعة تحميل صفحة الهبوط لمتجر إلكتروني بمقدار ثانية واحدة إلى ارتفاع ملحوظ في الإيرادات.

نتوقع أن تضيف الإصدارات المستقبلية من Next.js مزيدًا من الميزات إلى هذا المجال، وأن تسهم بذلك في دفع الويب إلى الأمام. ويُعد مشروعهم مفتوح المصدر الخاص بـ التجارة الإلكترونية باستخدام Next.js جديرًا بالاهتمام.

مستقبل تطوير الويب باستخدام React#

سيستمر الأداء في التحسن، وستزداد التقنية التي تقف وراءه تعقيدًا مع كل خطوة جديدة.

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

كلما قلّ ظهور التعقيدات في دورة التطوير المعتادة، أصبح تصور الأتمتة أسهل واتسع نطاق تطبيقاتها العملية.

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

TeleportHQ، منصة مجانية منخفضة البرمجة مع تعاون فوري#

TeleportHQ هي منصة مجانية منخفضة البرمجة لتبسيط عملية التطوير وزيادة إنتاجيتك. توفر إمكانات تطوير منخفضة البرمجة عبر واجهة مرئية، ومكوّنات قابلة لإعادة الاستخدام، وإضافة لاستيراد تصاميم Figma، وتصديرًا لكود نظيف إلى Next.js وتسعة أُطر عمل مختلفة لـ JavaScript.

باستخدام TeleportHQ، ستتمكن من الانتقال بسرعة من النموذج الأولي للتصميم إلى كود جاهز للنشر لأي مشروع. أنشئ مواقع ثابتة أو تطبيقات ويب أو تطبيقات جوال، ثم صدّر الكود إلى إطار العمل الذي تفضله.