تبني Next.js تدريجياً | Next.js العربية

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

تحتاج العديد من الشركات إلى تحديث بنيتها التقنية لتقليل التكاليف، وزيادة إنتاجية المطورين، وتقديم أفضل تجربة لعملائها. لقد حسّن التطوير القائم على المكونات (Component-driven development) بشكل كبير سرعة النشر وإمكانية إعادة استخدام أكواد القواعد البرمجية الحديثة.

ومع أكثر من 8 ملايين تنزيل/شهر، تُعتبر React الخيار الرائد للمطورين في التطوير القائم على المكونات. Next.js، إطار عمل React للإنتاج، يتيح لك تبني React تدريجياً.

الدافع

في عالم يزداد اعتماداً على الأجهزة المحمولة، أصبح تحسين وتتبع مؤشرات الويب الأساسية (Core Web Vitals) أمراً بالغ الأهمية للنجاح. من المحتمل أن يكون عملاؤك موزعين في جميع أنحاء العالم بسرعات إنترنت متفاوتة. كل ثانية (أو جزء من الثانية) إضافية يقضيها المستخدم في انتظار تحميل الصفحة أو إكمال إجراء ما قد تكون الفارق بين تحقيق عملية بيع أو انطباع أو تحويل.

إذا كنت تقوم بتحديث بنيتك التقنية، فقد تواجه تحديات مثل:

يحتوي تطبيقك على أكواد قديمة تعود لسنوات يصعب فهمها وقد تستغرق سنوات (وملايين الدولارات) لإعادة كتابتها بالكامل.
تزداد أوقات تحميل الصفحات مع زيادة حجم وتعقيد التطبيق. أصبحت صفحات التسويق البسيطة بطيئة مثل أكثر الصفحات تعقيداً.
تحاول توسيع فريق التطوير الخاص بك، ولكنك تواجه صعوبات في إضافة المزيد من المطورين إلى قاعدة الأكواد الحالية.
لديك عمليات قديمة للتكامل المستمر والنشر (CI/CD) وعمليات DevOps، مما يقلل من إنتاجية المطورين ويجعل من الصعب طرح تغييرات جديدة بشكل آمن وموثوق.
تطبيقك غير متجاوب مع الأجهزة المحمولة ومن المستحيل تحديث التنسيق العام للصفحة دون كسر أجزاء أخرى من التطبيق.

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

الاستراتيجيات

مسار فرعي (Subpath)

الاستراتيجية الأولى هي تكوين خادمك أو الوكيل (proxy) بحيث يشير كل شيء تحت مسار فرعي معين إلى تطبيق Next.js. على سبيل المثال، قد يكون موقعك الحالي على example.com، ويمكنك تكوين الوكيل بحيث يقدم example.com/store متجراً إلكترونياً مبنيًا باستخدام Next.js.

باستخدام basePath، يمكنك تكوين أصول وروابط تطبيق Next.js الخاص بك للعمل تلقائياً مع المسار الفرعي الجديد /store. نظراً لأن كل صفحة في Next.js هي مسار مستقل (standalone route)، فإن صفحات مثل pages/products.js ستوجه إلى example.com/store/products في تطبيقك.

next.config.js

module.exports = {
  basePath: '/store',
};

لمعرفة المزيد عن basePath، راجع الوثائق.

(ملاحظة: تم تقديم هذه الميزة في Next.js 9.5 وما فوق. إذا كنت تستخدم إصدارات أقدم من Next.js، يرجى الترقية قبل تجربتها.)

إعادة الكتابة (Rewrites)

الاستراتيجية الثانية هي إنشاء تطبيق Next.js جديد يشير إلى عنوان URL الجذر لمجالك. ثم يمكنك استخدام rewrites داخل next.config.js لجعل بعض المسارات الفرعية يتم توجيهها إلى تطبيقك الحالي.

على سبيل المثال، لنفترض أنك أنشأت تطبيق Next.js ليتم تقديمه من example.com مع next.config.js التالي. الآن، سيتم التعامل مع الطلبات للصفحات التي أضفتها إلى تطبيق Next.js هذا (مثل /about إذا أضفت pages/about.js) بواسطة Next.js، وسيتم توجيه طلبات أي مسار آخر (مثل /dashboard) إلى proxy.example.com.

next.config.js

module.exports = {
  async rewrites() {
    return [
      // نحتاج إلى تعريف إعادة كتابة لا تفعل شيئاً لتفعيل التحقق
      // من جميع الصفحات/الملفات الثابتة قبل محاولة التوجيه
      {
        source: '/:path*',
        destination: '/:path*',
      },
      {
        source: '/:path*',
        destination: `https://proxy.example.com/:path*`,
      },
    ];
  },
};

لمعرفة المزيد عن إعادة الكتابة، راجع الوثائق.

واجهات أمامية مصغرة مع مستودعات أحادية ونطاقات فرعية (Micro-Frontends with Monorepos and Subdomains)

تجعل Next.js وVercel من السهل تبني الواجهات الأمامية المصغرة (micro-frontends) والنشر كمستودع أحادي (Monorepo). يتيح لك ذلك استخدام النطاقات الفرعية (subdomains) لتبني التطبيقات الجديدة تدريجياً. بعض فوائد الواجهات الأمامية المصغرة:

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

بنية مستودع أحادي يتم نشره على Vercel.

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

مثال على عناوين URL للنشر المقدمة من تكامل Git.

الختام

تم تصميم Next.js ليتم تبنيه تدريجياً في البنية التقنية الحالية الخاصة بك. تجعل منصة Vercel هذه التجربة تعاونية مع معاينات النشر لكل تغيير في الكود، من خلال التكامل السلس مع GitHub وGitLab وBitbucket.

معاينة التغييرات على الفور محلياً باستخدام التحديث السريع (Fast Refresh)، مما يزيد من إنتاجية المطورين.
ادفع التغييرات لإنشاء معاينة الفرع (Branch Preview)، مُحسّنة للتعاون مع أصحاب المصلحة.
انشر في الإنتاج باستخدام Vercel عن طريق دمج طلب السحب (PR). لا حاجة لعمليات DevOps معقدة.