المناطق المتعددة (Multi-Zones)

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

على سبيل المثال، لنفترض أن لديك مجموعة الصفحات التالية التي ترغب في تقسيمها:

• /blog/* لجميع منشورات المدونة
• /dashboard/* لجميع الصفحات عندما يكون المستخدم مسجل الدخول إلى لوحة التحكم
• /* لبقية موقعك غير المغطى بالمناطق الأخرى

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

التنقل بين الصفحات في نفس المنطقة سيقوم بتنقل ناعم، وهو تنقل لا يتطلب إعادة تحميل الصفحة. على سبيل المثال، في هذا الرسم البياني، التنقل من / إلى /products سيكون تنقلًا ناعمًا.

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

كيفية تعريف منطقة

لا توجد واجهات برمجة تطبيقات خاصة لتعريف منطقة جديدة. المنطقة هي تطبيق Next.js عادي حيث تقوم أيضًا بتكوين basePath لتجنب التعارض مع الصفحات والملفات الثابتة في المناطق الأخرى.

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/blog',
}

التطبيق الافتراضي الذي سيتعامل مع جميع المسارات غير المرسلة إلى منطقة أكثر تحديدًا لا يحتاج إلى basePath.

أصول Next.js، مثل JavaScript وCSS، سيتم أيضًا إضافة بادئة لها بـ basePath للتأكد من أنها لا تتعارض مع أصول المناطق الأخرى. سيتم تقديم هذه الأصول تحت /basePath/_next/... لكل من المناطق.

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

كيفية توجيه الطلبات إلى المنطقة الصحيحة

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

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

async rewrites() {
    return [
        {
            source: '/blog',
            destination: `${process.env.BLOG_DOMAIN}/blog`,
        },
        {
            source: '/blog/:path+',
            destination: `${process.env.BLOG_DOMAIN}/blog/:path+`,
        }
    ];
}

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

جيد أن تعرف: يجب أن تكون مسارات URL فريدة لمنطقة. على سبيل المثال، محاولة منطقتين تقديم /blog سينشئ تعارضًا في التوجيه.

الربط بين المناطق

يجب استخدام علامة a للروابط إلى مسارات في منطقة مختلفة بدلاً من مكون Next.js <Link>. هذا لأن Next.js سيحاول جلب مسبقًا والتنقل الناعم إلى أي مسار نسبي في مكون <Link>، وهو ما لن يعمل عبر المناطق.

مشاركة الكود

يمكن أن تعيش تطبيقات Next.js التي تشكل المناطق المختلفة في أي مستودع. ومع ذلك، غالبًا ما يكون من الملائم وضع هذه المناطق في monorepo لمشاركة الكود بسهولة أكبر. بالنسبة للمناطق الموجودة في مستودعات مختلفة، يمكن أيضًا مشاركة الكود باستخدام حزم NPM العامة أو الخاصة.

نظرًا لأنه يمكن إصدار الصفحات في مناطق مختلفة في أوقات مختلفة، يمكن أن تكون أعلام الميزات مفيدة لتمكين أو تعطيل الميزات بالتزامن عبر المناطق المختلفة.

بالنسبة لتطبيقات Next.js على Vercel، يمكنك استخدام monorepo لنشر جميع المناطق المتأثرة باستخدام أمر git push واحد.