لماذا اخترت Next.js على Gatsby أو Gridsome أو Nuxt؟

عندما نختار إطار عمل لمشروع ويب جديد ، فإننا نميل عادةً إلى الالتزام بالأدوات المألوفة لدينا ، بغض النظر عن مدى ملاءمتها للمشروع. أحاول أن أفعل العكس تمامًا. كلما سنحت لي الفرصة ، أجرب تقنيات جديدة. ماذا تعلمت بعد هذه التجارب؟ لماذا ينتهي بي الأمر مع Next.js كأداة قياسية لمولد الموقع الثابت (SSG)؟ في هذا المنشور سأتحدث عن كيفية تجربتي لتقنيات الويب المختلفة. يتعلق الأمر بإيجاد أداة مناسبة داخل Jamstack ، وكيفية اختيار ما هو مناسب تمامًا للمطور والاندماج جيدًا في مشروعه ، ولماذا اخترت Next.js.

عن تجربتي في تطوير الويب

بدأت رحلتي في تطوير الويب باستخدام PHP و MySQL ، وبعد ذلك ، عندما كنت في الجامعة ، انتقلت إلى منصة .NET. أحببت نوع الأمان ، ونموذج MVC ، وقدرات تصحيح أخطاء الكود. هكذا كان الأمر ، واصلت استخدام .NET في المستقبل ، وأقوم بالبرمجة والاستشارات. لكنني كنت أتحول تدريجياً إلى JavaScript ، وخاصة الإصدارات القديمة من Angular.



منذ حوالي عامين ، تحولت تقريبًا إلى Jamstack. قررت أن ألقي نظرة فاحصة على Vue.js ، حيث بدت وكأنها أداة JavaScript الأكثر صداقة على الإطلاق . لقد صنعت موقع الويب الخاص بيباستخدام Nuxt.js. إنه منشئ موقع ثابت يسمى الآن إطار عمل بديهي لتطوير تطبيقات Vue.js. عندما أنهيت هذا المشروع ، ظهرت النسخة الأولى من Gatsby ، وهو نظام لبناء مواقع ثابتة يعتمد على React . لقد استخدمت Gatsby في مشروعي التالي لإنشاء موقع Kentico Advantage ، وهو مشروع بسيط يهدف إلى دعم وكالات الويب. كانت هذه تجربتي الأولى مع React. وما واجهته بعد ذلك ، لم يعجبني حقًا. نشأت صعوبات كبيرة للغاية حتى عندما كان من الضروري القيام ببعض التافه.



كان تطوري التالي هو موقع الزفاف الخاص بي. ثم أعطى غاتسبي وتتفاعل فرصة أخرى، ولكن في النهاية، فقط بضعة أيام في وقت لاحق، وتحولت إلى Gridsome إطار لVue.js. في ذلك الوقت ، كان مولد الموقع الثابت هذا يكتسب شعبية بسرعة. صادفته حرفيا في كل زاوية. بفضل SSG هذا ، تمكنت من إنشاء موقع ويب بسيط للعمل في حوالي ثلاث ساعات. لقد كنت منبهرًا. نمت Vue.js أكثر قليلاً في عيني.



ثم ظهر مشروع Sourcebit . إنه مكون إضافي يستخدم لدمج مصادر البيانات المختلفة و SSG ، وهو المسؤول عن تحويل البيانات وجعلها أسهل في الاستخدام. ومع ذلك ، فإن مولد الموقع الثابت الوحيد المستند إلى JavaScript والمدعوم من Sourcebit هو Next.js... لذلك ، بعد تعلم الأساسيات ، استخدمت Next.js في مشروع آخر.

اختيار الأدوات بناءً على تجربتك أو خبرة شخص آخر

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



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



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



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



أعلاه ، ذكرت ثلاث أدوات جافا سكريبت. لكن Jamstack ليس دائمًا JavaScript. ربما تكون PHP أو Ruby أقرب إليك. للعثور على منشئ الموقع الثابت الذي يناسبك ، ألق نظرة على الجدول التالي.





لا يمكنني قول أي شيء عن الأنظمة الأساسية التي لم أحاول العمل معها بعد. لكن يمكنني مشاركة أفكاري بشأن Vue.js و React ومولدات المواقع الثابتة ذات الصلة.

Vue.js: مقارنة Gridsome و Nuxt.js

إن إطار عمل Vue.js معروف ومشهور بتوثيقه الممتاز. Gridsome يتبع نفس المسار. تمت كتابة وثائق SSG بشكل جيد للغاية. إنه يحتوي على كل شيء يمكن لأي شخص يبدأ مع Gridsome أن يتوقعه. صحيح. عندما قرأت هذه الوثائق ، بدا لي أن مؤلفيها كانوا يقرؤون أفكاري. يستخدم Gridsome GraphQL. لذلك ، يجب توصيل مصادر البيانات بالموقع باستخدام مكونات إضافية خاصة. يقوم Gridsome تلقائيًا بربط نماذج البيانات بالقوالب مع الأسماء المقابلة وتنظيم التوجيه. للمبتدئين ، هذه ميزة كبيرة. يسمح Gridsome بموارد JavaScript خارجية. أعلم أن الأمر لا يبدو مثل "أفضل الممارسات" ، ولكن على سبيل المثال ، إذا قمت بتنزيل نموذج من موقع مثل HTML5UP.net، سيحتوي هذا القالب على قدر من كود JS. عندما احتجت إلى شيء مثل هذا في Nuxt.js واجهت صعوبات. في النهاية ، اضطررت إلى إعادة كتابة الوظيفة المقابلة في Vue.



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



عند العمل مع Nuxt ، كان أصعب شيء هو فهم تفاصيل العمل مع مخزن بيانات Vuex وإنشاء Vuex.store... تُستخدم هذه المستودعات في مشاريع Nuxt.js. إذا احتاج أحد المكونات إلى العمل مع البيانات ، فأنت بحاجة إلى المتابعة من حقيقة أن جميع البيانات مخزنة في مكان واحد. يمكنك بالطبع تخزين البيانات على مستوى المكون ، ولكن يحدث غالبًا أن المكونات المختلفة تستخدم نفس البيانات. نتيجة لذلك ، لتجنب تكرار الرمز ، تحتاج إلى استخدام مخزن بيانات واحد. لتنفيذ مثل هذا التخزين ، لا تحتاج إلى أي مكونات إضافية خاصة تجمع البيانات الضرورية من مكان ما. على الرغم من أنني، على سبيل المثال، يستخدم البرنامج المساعد واحد مصممة للعمل مع CMS دون في Kentico كونتنت UI . لقد جعل هذا حياتي أسهل بالتأكيد ، لكن كان بإمكاني أيضًا استخدام واجهة برمجة تطبيقات الجلب مع Delivery SDK.... بعد أن نجح كل شيء معي ، أدركت أنني أحب هذا النمط. إنها موثوقة ومرنة. أنا ، للعمل في المشاريع الكبيرة ، سأختاره. لاستخدامها ، تحتاج فقط ، في البداية ، إلى قضاء بعض الوقت في التعرف عليها.



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



دعونا نلخص المعلومات حول Gridsome و Nuxt.js من خلال سرد نقاط القوة (المميزة بعلامة "+") ونقاط الضعف (المميزة بعلامة "-") في الجدول التالي.

React: Gatsby Next.js

لنبدأ مع غاتسبي. أعتقد أن الميزة الأكثر إثارة للاهتمام في هذا الإطار تتمثل في أداة للعمل مع GraphQL تسمى GraphiQL . يستخدم Gatsby GraphQL. وتتيح لك GraphiQL التعامل مع البيانات المستخدمة في الموقع. لا أستطيع التأكيد بما فيه الكفاية على أهمية وفائدة هذه الأداة. يحفظ المطور من الاضطرار إلى قراءة الوثائق الخاصة بمصدر البيانات المستخدم. تسمح لك GraphiQL بعرض البيانات بشكل تفاعلي. من البيانات ، يمكنك اختيار ما تريد. ينتج عن هذا استعلامات GraphQL التي يتم إنشاؤها تلقائيًا والتي يتم نسخها إلى المكونات.





العمل مع GraphiQL يعني



استخدام GraphQL في Gatsby أيضًا البحث عن المكونات الإضافيةلمصادر البيانات القابلة للتطبيق. صحيح أن هذه المكونات الإضافية متاحة لجميع أنظمة إدارة المحتوى الرئيسية بدون واجهة مستخدم. قوة أخرى لـ Gatsby هي أنه تم إنشاء عدد كبير من المكونات الإضافية لهذا الإطار. توجد مكونات إضافية لكل شيء حرفيًا بدءًا من تحسين محركات البحث إلى التحميل التدريجي للصور إلى تصدير مخطط GraphQL.



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









يستخدم التوجيه في Next.js Next.js نموذج توجيه قائم على الملفات. هذا يجعل من السهل جدًا العثور على الصفحات والقوالب حتى في المواقف التي يتعين عليك فيها العمل في مشروع غير مألوف. يتيح لك إطار العمل هذا الجمع بين الصفحات الثابتة والصفحات التي يتم إنشاؤها ديناميكيًا. يمكن دمج آليتي إنشاء الصفحة هاتين في صفحة واحدة. هذا يسهل بشكل كبير تنفيذ وظيفة معاينة المواد. يعرف كل من Gatsby و Next.js كيفية إنشاء عمليات إنشاء إضافية. ولكن في حالة Gatsby ، فأنت بحاجة إلى استضافة الموقع على Gatsby Cloud ، وهذا ممكن فقط مع المكونات الإضافية المعدة بمتطلبات خاصة.



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



دعونا نلخص إيجابيات وسلبيات Gatsby و Next.js.

اعتبارات أخرى يجب مراعاتها عند اختيار النظام الأساسي

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

• , ?
• ?
• ?
• , , - ?
• ?
• - ?

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



بالنسبة للمشاريع الأكبر والأكثر جدية ، أستخدم مكتبة React. في Kentico ، تعتمد جميع عمليات تطوير الواجهة الأمامية تقريبًا على React. تخطط الشركة للتحرك في هذا الاتجاه في المستقبل. لذلك ، من المنطقي بالنسبة لي أن أفعل الشيء نفسه. إذا تحدثنا عن اختيار مولد موقع ثابت ، فأنا الآن أستخدم كل من Next.js و Gatsby ، لكنني أميل أكثر نحو أولهما. بالنسبة لي ، فإن أكبر ميزة في هذا الإطار هي التوجيه المستند إلى الملفات ، والذي يدعم أيضًا المسارات الديناميكية. أحب أيضًا التوافق مع Sourcebit ، والذي سيسمح ، إذا لزم الأمر ، بتغيير مصادر البيانات أو مجموعات SSG دون إعادة كتابة كل شيء من البداية.



ما مولدات الموقع الثابتة التي تستخدمها؟