تحطيم Podcast الحلقة 23 مع Guillermo Rauch: What Is Next.js؟

نتحدث اليوم عن Next.js. ما هو ، وأين يمكن أن يتناسب مع سير عمل تطوير الويب لدينا؟ لقد تحدثت إلى المؤلف المشارك Guillermo Rauch لمعرفة ذلك.

وتظهر الملاحظات

• غييرمو راوخ على تويتر
• Next.js

تحديث اسبوعي

• "إتقان الدعائم وأنواع PropTypes في التفاعل"
  بواسطة David Adeneye
• "قرارات التصميم الملهمة مع برادبري طومسون: فن التصميم الجرافيكي"
  بواسطة آندي كلارك
• "إعداد واجهة برمجة تطبيقات باستخدام Flask و Cloud SQL و App Engine من Google"
  بواسطة Wole Oyekanmi
• "النماذج والتحقق من صحة في التفاعل الأيوني"
  بواسطة جيري نافي
• "كيف تساعد عملائك في الحصول على المزيد من الروابط الخلفية من خلال التصميم"
  بواسطة سوزان سكاكا

نسخة طبق الأصل

درو ماكليلان: هو المؤسس والرئيس التنفيذي لشركة Vercel ، وهي منصة سحابية للمواقع الثابتة التي تتناسب مع سير عمل Jamstack. وهو أيضًا أحد مؤسسي Next.js. قام سابقًا بتأسيس LearnBoost و CloudUp ، وهو معروف جيدًا بأنه منشئ العديد من مكتبات العُقَد مفتوحة المصدر الشائعة مثل Socket.io و Mongoose و SlackIn. قبل ذلك ، كان مطورًا أساسيًا في MooTools ، لذلك نعلم أنه يعرف طريقه حول JavaScript مثل ظهر يده. هل تعلم أنه تلقى ذات مرة عمولة ملكية من ملك إسبانيا لإنشاء تمثال جليدي من الخس الجليدي؟ أصدقائي المحطمون ، من فضلكم رحبوا بغيليرمو راوخ. مرحبا غييرمو كيف حالك؟

غييرمو راوخ: أنا أحطم نفسي جيدًا ، شكرًا لاستضافتي.

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

Guillermo: يعد Next.js عضوًا مثيرًا للاهتمام في عالم Jamstack ، لأن Next.js بدأ بالفعل في كونه إطار عمل يركز بشكل كامل على SSR. لقد بدأ في الحصول على الكثير من التبني خارج مساحة Jamstack حيث كان الأشخاص يقومون ببناء أشياء كبيرة جدًا على وجه التحديد عندما أرادوا إنشاء محتوى بواسطة المستخدم أو محتوى ديناميكي أو شبكات اجتماعية أو تجارة إلكترونية ، وكانوا يعرفون أنهم يريدون SSR لأن مجموعة بياناتهم كانت كبير جدًا أو ديناميكي جدًا. أعتقد أنه وقع تحت الرادار بالنسبة للكثير من الأشخاص في عالم Jamstack ، ولكن لاحقًا ، اكتسب Next.js قدرات التحسين الثابت.

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

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

درو: قد يقول الناس أن React هي بالفعل إطار عمل ، فمن المؤكد أنك تسمعها موصوفة بهذه الطريقة. ماذا يعني أن تكون إطار عمل لـ React؟

غييرمو: هذه ملاحظة رائعة ، لأنني دائمًا ما أشير إلى أن الأشخاص الذين يتفاعلون مع Facebook و React خارج Facebook هما وحشان مختلفان تمامًا. يتم استخدام React at Facebook في الواقع جنبًا إلى جنب مع عرض الخادم ، ولكن حتى عرض الخادم الخاص بهم ، على سبيل المثال ، لا يستخدم Node.js ، فهو يستخدم جهازًا افتراضيًا عالي التخصص يسمى Hermes يتصل بنوع اختراق الإنتاج و PHP المكدس والإجابات كل ما يحتاجه Facebook المتقدم والغريب.

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

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

Guillermo: ما يعنيه إنشاء إطار عمل لـ React ، فهذا يعني أنك تجعل React الجزء الأساسي من القصة ، ونأمل أن يكون هذا شيئًا سنحاول القيام به مع Next.js ، منحنى التعلم يتعلق بشكل أساسي بـ React مع بعض الإضافات السطح لـ Next.js ، لا سيما حول جلب البيانات وتوجيهها. نحن أيضًا نقوم بالكثير من تحسينات الإنتاج ، لذلك عندما تحصل على React ، عندما تحصل على تطبيق Create React ، والذي يشبه نوعًا ما ، أود أن أسميها سيارة تم تشغيلها ، يمنحها لك Facebook ، ربما لا يتم تلبية احتياجات الإنتاج حقًا . أو إذا حاولت القيام بذلك بنفسك عن طريق تكوين Webpack وتهيئة Babel وتكوين عرض الخادم والتوليد الثابت ، فمن الصعب أيضًا تجميع سيارة من نقطة الصفر. سيعطيك Next.js هذا التكوين الصفري وأيضًا مجموعة من الإعدادات الافتراضية المحسّنة للإنتاج حول بناء أشياء كبيرة بالكامل باستخدام React.

درو: يبدو الأمر كما لو أنه يضع نوعًا من النظام البيئي حول تطبيق React الخاص بك مع مجموعة من الأدوات المعدة مسبقًا لتمكينك من-

غييرمو: هذا صحيح.

درو: ابدأ التشغيل وقم بإنشاء موقع ثابت أو عرض الخادم أو التوجيه.

غييرمو: هذا صحيح ، لقد استخدمت كلمة هناك مفتاح جدًا جدًا لكل هذا ، تم تكوينه مسبقًا. نحن محظوظون بما يكفي لجذب انتباه Google Chrome كمساهم في Next.js. واحدة من قادة هذا المشروع ، ما يهمها هو أنهم عندما كانوا يعملون على أطر عمل داخليًا في Google ، واجهوا الكثير من المشكلات نفسها التي يواجهها المجتمع والمصدر المفتوح اليوم. كانت هناك العديد من المبادرات المتنافسة المختلفة في Google حول كيفية توسيع نطاق تطبيقات الويب عالية الأداء وجعلها خارج الصندوق.

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

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

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

غييرمو: هذه نقطة جيدة ، حيث يلتقي صنع القرار الفني بنوع من الفن. من ناحية أخرى ، أود حقًا أن أدعي أن Next لم يتم طرحه على الإطلاق ، والسبب في ذلك هو أنك إذا انتقلت تحديدًا إلى github.com/vercel/nextjs ودليل الأمثلة ، فسترى أن هناك تقريبًا مثل انفجار اندماجي للتقنيات التي يمكنك استخدامها مع Next.js. سترى قائمًا على النار ، سترى Graphic UL ، سترى Apollo ، سترى Redux ، سترى MobX ، في مساحة CSS هناك المزيد من الخيارات.

Guillermo: لدينا منفذ CSS افتراضي مضمن ، ولكن بعد ذلك يمكنك استخدام نوعين منه ، أحدهما مع استيراد ، والآخر بعلامات النمط التي نسميها Style JSX ، والتي تشبه إلى حد كبير نهج منصة الويب لـ Shadow CSS. السبب في أنني أعني أنه لم يتم طرحه هو أننا نريد أن يظل Next.js قريبًا جدًا من "المعدن المجرد" للويب ، وألا يقدم الكثير من العناصر الأولية التي إذا كانت شبكة الويب اعتبارًا من 10 سنوات من اليوم غير متوافقة معها. ثم إذا نظرت إلى الأمثلة ، سترى أن هناك كل هذه التقنيات الأخرى التي يمكنك توصيلها.

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

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

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

غييرمو: بالضبط.

درو: كنت في المواقف التي يوجد فيها عدد كبير جدًا من الخيارات للمكونات التي يجب استخدامها ، ويمكن أن تكون ساحقة وتعيق تحقيق الإنتاجية.

غييرمو: بالضبط.

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

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

Guillermo: من الأمثلة الرائعة هنا ، مثل New York Times ، حيث سيقدمون لك أدوات مضمنة مع أدوات تحليل البيانات والرسوم المتحركة التفاعلية ، وسيوصون بالقصة التي يجب قراءتها بعد ذلك ، ولديهم نموذج اشتراك مدمج يمنحك في بعض الأحيان جزء من المحتوى ويحسب أحيانًا عدد المقالات التي قرأتها. كما لو أخبرتك بهذا عندما تم اختراع الويب ، مثل Tim Berners-Lee سيكون مثل ، "لا ، هذا جنون ، هذا غير ممكن على الويب ،" ولكن هذا هو الويب الذي لدينا اليوم.

Guillermo: Next.js يلبي الكثير من هذه الاحتياجات الحديثة المعقدة ، مما يعني أنك سترى الكثير من استخدام التجارة الإلكترونية ، وسترى الكثير من المحتوى مع ذلك. تعني التجارة الإلكترونية ، بالمناسبة ، ليس فقط شراء العناصر ، ولكن تجارب مثل أكبر مواقع الويب العقارية على الويب ، realtor.com ، zillow.com ، trulio.com ، هذه الفئة بأكملها هي Next.js ، ثم المحتوى المواقع. لقد أنشأنا موقع washingtonpost.com كعميل لـ Vercel و Next.js ، ثم أصبح لدينا فئة ثالثة أكثر بروزًا ولكنها مثيرة للاهتمام للغاية ، وهي التطبيقات الكاملة والمحتوى الذي ينشئه المستخدمون ، مثل tiktok.com ، ومثلك نوعًا ما قد يعتقد أن حالة استخدام التطبيق الأصلية المكونة من صفحة واحدة بالإضافة إلى كونها ممثلة تمامًا هناك.

Guillermo: يتألق Next.js عندما تحتاج إلى الكثير من المحتوى الذي يجب تقديمه بسرعة كبيرة جدًا ، ويجب تحسينه لتحسين محركات البحث ، وفي نهاية اليوم ، إنه مزيج ديناميكي وثابت.

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

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

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

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

غييرمو: ملاحظتك صحيحة 100٪. يعد JavaScript أحد أكبر الأشياء على الويب وأحد أكبر الأوزان على الويب ، ومثل المواد المختلفة لها كثافة وأوزان مختلفة بغض النظر عن الحجم المادي الفعلي ، تميل JavaScript إلى أن تكون عنصرًا كثيفًا وثقيلًا جدًا. حتى الكميات الصغيرة من JavaScript مقارنة ، على سبيل المثال ، الصور التي يمكن معالجتها بشكل غير متزامن وخارج السلسلة الرئيسية ، يميل JavaScript إلى أن يكون مزعجًا بشكل خاص.

Guillermo: لقد استثمرت Next.js قدرًا هائلًا من الجهد لتحسين حزمك تلقائيًا. أول ما كان حدسي الأول عندما خطرت لي فكرة Next.js هو أنك ستحدد ، على سبيل المثال ، 10 مسارات. في عالم Next.js ، تقوم بإنشاء دليل صفحات وتقوم بإسقاط ملفاتك في Index.js و About.js و Settings.js و Dashboard.js و Termsofservice.js و Signup.js و Login.js. تصبح هذه نقاط دخول لتطبيقك يمكنك مشاركتها عبر جميع أنواع الوسائط.

Guillermo: عند إدخالها ، نريد أن نقدم لك JS ذي الصلة بهذه الصفحة أولاً وقبل كل شيء ، ثم ربما حزمة مشتركة بحيث تكون التنقلات اللاحقة داخل النظام سريعة للغاية. Next.js أيضًا ، وهو لطيف جدًا جدًا ، يقوم تلقائيًا بجلب باقي الصفحات المتصلة بنقطة الدخول هذه مسبقًا ، بحيث يبدو وكأنه تطبيق من صفحة واحدة. يقول الكثير من الناس مثل ، "لماذا لا تستخدم تطبيق Create React فقط إذا كنت أعرف أنه ربما لدي طريقان؟" أقول لهم دائمًا ، "انظروا ، يمكنك العثور عليها كصفحات ، ولأن Next.js ستجلب تلقائيًا تلك المتصلة مسبقًا ، ينتهي بك الأمر بالحصول على تطبيقك المكون من صفحة واحدة ، ولكن من الأفضل تحسينه فيما يتعلق بهذا الطلاء الأولي ، نقطة الدخول الأولية هذه ".

غييرمو: كان هذا هو الأسلوب الأولي لتقسيم الكود ، لكنه أصبح بعد ذلك أكثر تعقيدًا بمرور الوقت. ساهمت Google في تحسين لطيف للغاية يسمى Module and No Module ، والذي سيعطي JS تفاضلًا للمتصفحات الحديثة ، و JS القديم المليء بالحقول المتعددة إلى المتصفحات الأخرى ، وهذا التحسين مؤتمت بنسبة 100٪ ويحقق توفيرًا هائلاً. لقد أعطيناها لأحد عملائنا الذين استضفناهم في Vercel يسمى Parnaby's ، وأعتقد أنه إذا لم أكن مخطئًا ، فقد كان شيئًا مهمًا للغاية. ربما كان ذلك مثل توفير 30٪ في أحجام الكود ، وكان ذلك لمجرد أنهم قاموا بترقية Next.js إلى إصدار يعمل على تحسين حزم JS بشكل أفضل.

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

درو: هناك في بعض الأحيان فوائد عظيمة تتعلق بالالتزام بالإعدادات الافتراضية والالتزام بالتكوين الأكثر شيوعًا للأشياء ، والذي يبدو أنه نهج Next.js حقًا. أتذكر عندما بدأت في كتابة PHP في أوائل العقد الأول من القرن الحادي والعشرين ، وكان الجميع يستخدمون PHP و MySQL ، وفي ذلك الوقت كنت قد أتيت للتو من Windows لذلك أردت استخدام PHP و Microsoft Sequel Server. يمكنك فعل ذلك ، لكنك تسبح عكس التيار طوال الطريق. ثم بمجرد أن انتقلت للتو إلى MySQL ، بدأ النظام البيئي بأكمله في العمل من أجلي ولم أكن بحاجة إلى التفكير في الأمر.

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

Guillermo: على سبيل المثال ، أحد الأشياء التي يقوم بها Next.js الآن هو أنه يقوم بترقية الإعداد الافتراضي الخاص به من Webpack 4 إلى Webpack 5 ، والذي يحتوي على بعض الأشياء المعطلة ، ولهذا السبب نقدمه أولاً للأشخاص كخيار- في العلم ، ولكن لاحقًا ستصبح الخيار الافتراضي. يقوم Webpack 5 بإجراء تحسينات مذهلة على الأداء ، لكننا لا نضحي بنظام Webpack البيئي ، بل قمنا بتحسينه بشكل تدريجي. بالتأكيد ، كانت هناك بعض الأشياء الصغيرة جدًا التي يجب التضحية بها ، ولكن هذه فائدة لا تصدق لنظام JS البيئي اليوم أن الكثير من الناس يتسترون عليها ، على ما أعتقد ، لأنهم ربما يرون ، "أوه ، كان بإمكاننا فعل X في Soho ، ربما كان أسرع قليلاً ، أو ربما يستغرق MPM في Soho وقتًا أقل. " إنهم يلتقطون بعض التفاصيل ويفتقدون الصورة الأكبر ، وهي أن قيمة النظام البيئي هائلة.

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

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

غييرمو: هذه فائدة مهمة للغاية عندما يتعلق الأمر بخدمة الجماهير العالمية. تحصل بشكل أساسي على CDN تلقائي خارج الصندوق ، خاصةً عند نشر الشبكات المتطورة الحديثة مثل Vercel أو AWS Amplify أو Netlify وما إلى ذلك. يحتوي Next.js على فرضية أنه إذا كان من الممكن جعله ثابتًا ، فيجب أن يكون ثابتًا. عندما تبدأ مشروعًا لأول مرة وتعمل على صفحتك الأولى أو تقوم بركل إطارات الإطار ، فقد تجعل كل شيء ثابتًا أيضًا.

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

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

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

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

Guillermo: بعد ذلك ، تبدأ كمطور للاختيار بين ربما مسؤولية أقل لتحمل المزيد من المسؤولية ، لأنه عندما تختار استخدام SSR ، فأنت تقوم الآن بتنفيذ التعليمات البرمجية على الخادم ، وتقوم بتنفيذ التعليمات البرمجية على السحابة ، وهناك المزيد من المسؤولية مع مزيد من القوة. إن حقيقة أنه يمكنك تحديد مكان استخدام كل نوع من الأدوات هي في اعتقادي فائدة مثيرة للاهتمام للغاية من Next.

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

Guillermo: يمنحك Next.js خادم تطوير ، لذا يمكنك تنزيل Next وتشغيل Next Dev الخاص بك ، وهذا هو خادم dev. من الواضح أن خادم dev مُحسّن بشكل لا يصدق للتطوير ، مثل أنه يحتوي على أحدث تقنيات التحديث السريع التي أطلقها Facebook ، حيث ... في الواقع ، لم يقم Facebook بإصداره ، ويستخدمه Facebook داخليًا للحصول على أفضل بديل للوحدات الساخنة وأكثرها أداءً وموثوقية ، بحيث أنك تكتب بشكل أساسي وتنعكس التغييرات على الشاشة ، لذلك هذا هو خادم dev.

Guillermo: ثم يمنحك Next خادم إنتاج يسمى Next Start ، ويحتوي Next Start على جميع إمكانيات إطار العمل للاستضافة الذاتية. الشيء المثير للاهتمام في Vercel هو أنه عند النشر بجانبه ، يتم تحسينه تلقائيًا ويكون بدون خادم بنسبة 100٪ ، مما يعني أنه لا توجد أي مسؤولية على الإطلاق عن الإدارة ، والتوسع ، والصرف ، والتحقق من صكوك الصرف ، والتطهير ، والنسخ ، والفشل العالمي مرارًا وتكرارًا ، لذلك سيتعين عليك تولي الأمر عند تشغيل Next Start بنفسك.

Guillermo: هذه أيضًا ميزة رائعة لـ Next.js ، لذلك على سبيل المثال ، يحتوي apple.com على العديد من الخصائص والنطاقات الفرعية والصفحات المختلفة على dotcom على Next.js التي يستضيفونها ذاتيًا ، نظرًا لاحتياجات الأمان والخصوصية شديدة التقدم والصارمة . من ناحية أخرى ، يستخدم موقع washingtonpost.com Vercel ، لذلك لدينا هذا النوع من المستخدمين ، ويسعدنا دعمهم جميعًا. الشيء الجميل في وجهة نظري هو أنه يمكن أن يمنحك أفضل ما في كلا العالمين من حيث الأداء الأمثل الذي يتحسن بمرور الوقت ، مع أفضل تجربة مطور مثل ، "مرحبًا ، ليس لدي للقلق بشأن أي نوع من البنية التحتية ".

درو: The Next.js هو مشروع مفتوح المصدر يتم تطويره من قبل الفريق في Vercel. هل هناك مساهمون آخرون خارج Vercel؟

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

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

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

غييرمو: نعم ، بالتأكيد. أحب مقارنتها كثيرًا بطريقة ما مثل Kubernetes في عصر الواجهة الأمامية بطريقة ما ، لأنني في نهاية اليوم أؤمن بشدة بأن ... Kubernetes هو شيء يحتاجه الجميع تقريبًا عندما يحتاجون إلى تشغيل عمليات Linux ، كما لو كنت تتحدث عن الرأي وأنت تقول إنها تقنية جيدة ، إنها غير متعمدة إلى حد كبير ، ولكن هناك بعض الآراء التي ننسى نوعًا ما. يبدو الأمر كما لو أنه في نهاية اليوم ، فقد نشأ من تشغيل شياطين معينة من برامج Linux التي تم تجميعها كحاويات.

غييرمو: التالي في وضع مماثل ، لأن ما نأخذه لكوننا بدائيًا عالميًا للعالم كمكوِّن React ، من الواضح أنه مؤيد ، لكننا نعتقد أنه بالنسبة للعديد من المؤسسات ، تمامًا كما تنجذب جميعها نحو Linux ، نحن رؤية نفس الشيء تجاه React و Vue ، لكن لحسن الحظ Vue لديها Nuxt أيضًا ، وهو حل رائع جدًا ، إنه مكافئ في التفكير والمبادئ مثل Next. نحن ننجذب نحو هذه المنصات مثل Next.js ، مثل Nuxt ، مثل Sapper لنظام Svelte البيئي.

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

درو: تم إطلاق إصدار جديد من Next.js مؤخرًا ، وأعتقد أن الإصدار 9.5. ما هي التغييرات الهامة التي حدثت في هذا الإصدار؟

غييرمو: الأمر الأكثر روعة ، كما قلت سابقًا ، هو أن الكثير من الأشياء تبدأ في الثبات ثم تصبح أكثر ديناميكية مع نمو الأشياء. بالمناسبة ، كان هذا هو مشروع WordPress. اعتمد WordPress في البداية على نهج قاعدة بيانات الملفات الثابتة ، ثم نما ليصبح بحاجة إلى قاعدة بيانات ، نوعًا ما يشبه ما وصفته مع كيفية تطور PHP لتصبح أكثر فأكثر MySQL. ما هو لطيف في Next.js 9.5 هو أنه يجعل الجيل الثابت المتزايد ميزة جاهزة للإنتاج ، لذلك قمنا بإزالتها من العلم غير المستقر.

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

Guillermo: مع التوليد الثابت المتزايد ، يمكنك إعادة إنشاء صفحة واحدة في كل مرة. ما قد يستغرق دقائق أو حتى ثوانٍ ، اعتمادًا على حجم موقعك على الويب ، يستغرق الآن أجزاء من الثانية. مرة أخرى ، لم تكن مضطرًا للتخلي عن أي من فوائد الشحنات الساكنة. ربما يكون هذا هو الشيء الذي يسعدني كثيرًا أنه أصبح مستقرًا في Next.js 9.5 ، وعلى وجه التحديد لأن مجتمع JS ومجتمع React ومجتمع إطار العمل والمجتمع الذي تم إنشاؤه بالموقع الثابت كانا يتحدثان عن هذا القرن الأحادي المتمثل في إنشاء تدريجي ثابت لـ a long time, so the fact that Next.js did it, it's being used in production and it's there for everybody to use, I think it's a major, major, major milestone.

Guillermo: There's lots of little DX benefits. One that's really nice in my opinion is Next.js, as I said, has a page system. You would argue, “Okay, so let's say that I'm uber.com and I've decided to migrate on Next.js, do I need to migrate every URL inside over to Next.js in order to go live?” This has become a pretty important concern for us, because lots of people choose Next.js, but they already are running big things, so how do you reconcile the two?

Guillermo: One of the things that Next.js allows you to do in 9.5 is you can say, “I want to handle all new pages that I created with Next.js with Next.js, and the rest I want to hand off to a legacy system.” That allows you incremental, incremental is the keyword here today, incremental adoption of Next.js. You can sort of begin to strangle your legacy application with your Next.js optimized application one page at a time, when you deploy and you introduce in your Next.js page, it gets handled by Next. If it doesn't match the Next.js routing system, it goes to the legacy system.

Drew: That sounds incredibly powerful, and the incremental rendering piece of that, I can think of several projects immediately that would really benefit that have maybe 30-minute build times for fixing a typo, as you say. That sort of technology is a big change.

Guillermo: We talked to one of the largest, I believe, use cases in Jamstack in the wild, and it was basically a documentation website and their build times were 40 minutes. We're doing a lot in this space, by the way, like we're making pre-rendering a lot faster as well. One of my intuitions for years to come is that as platforms get better, as the primitives get better, as the build pipelines get better we're going to continue to extend the useful lifetime of statics. Like what ended up taking 40 minutes is going to take four.

Guillermo: A great example is we're rolling out an incremental build cache, as well, system. I sort of pre-announced it on Twitter the other day, we're already seeing 5.5 times faster incremental builds. One of the things that I like about Jamstack is that the core tenet is pre-render as much as possible. I do think that's extremely valuable, because when you're pre-rendering you're not rendering just in time at runtime. Like what otherwise the visitor would incur in in terms of rendering costs on the server gets transferred to build time.

Guillermo: One of the most exciting things that's coming to Next is that without you doing anything as well, the build process is also getting faster. On the Vercel side, we're also taking advantage of some new cloud technology to make pre-rendering a lot faster as well. I think we're always going to live in this hybrid world, but as technology gets better, build times will get better, pre-rendering will get better and faster, and then you'll have more and more opportunities to do kind of a mix of the two.

Drew: Sounds like there's some really exciting things coming in the future for Next.js. Is there anything else we should know before we sort of go away and get started working with Next.js?

Guillermo: Yeah. I think for a lot of people for whom this is new, you can go to nextjs.org/learn, it'll walk you through building your first small static site with Next.js, and then it'll walk you through the journey of adding more and more complexity over time, so it's a really fun tutorial. I recommend also staying tuned for our announcement that I was just starting to share on twitter.com/vercel, where we share a lot of Next.js news. Specifically we highlight a lot of the work that's being done on our open source projects and our community projects and so on. For myself as well, twitter.com/rauchg if you want to stay on top of our thoughts on the ecosystem.

Drew: I've been learning all about Next.js today, what have you been learning about lately, Guillermo?

Guillermo: As a random tangent that I've been learning about, I decided to study more economics, so I've been really concerned with like what is the next big thing that's coming in terms of enabling people at scale to live better lives. I think we're going through a transition period, especially in the US, of noticing that a lot of the institutions that people were “banking on”, like the education system, like the healthcare system, a lot of those, like where you live and whether you're going to own a house or rent and things like that, a lot of these things are changing, they have changed rapidly, and people have lost their compass.

Guillermo: Things like, “Oh, should I go to college? Should I get a student loan?” and things like that, and there is a case to be made for capitalism 3.0, and there is a case to be made for next level of evolution in social and economic systems. I've been just trying to expand my horizons in learning a lot more about what could be next, no pun intended. I've found there's lots of great materials and lots of great books. A lot of people have been thinking about this problem, and there is lots of interesting solutions in the making.

درو: هذا رائع. If you, dear listener, would like to hear more from Guillermo, you can find him on Twitter at @RauchG, and you can find more about Next.js and keep up to date with everything that goes on in that space at nextjs.org. Thanks for joining us today, Guillermo. هل عندك كلمات فراق؟

Guillermo: No, thank you for having me.