كيفية بناء واجهات أمامية مصغرة باستخدام المناطق المتعددة وNext.js

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

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

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

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

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

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

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

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

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

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

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

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: '/blog-static',
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/blog-static/_next/:path+',
          destination: '/_next/:path+',
        },
      ],
    }
  },
}

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

مع إعداد المناطق المتعددة، تحتاج إلى توجيه المسارات إلى المنطقة الصحيحة حيث يتم تقديمها بواسطة تطبيقات مختلفة. يمكنك استخدام أي خادم وكيل 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+`,
        },
        {
            source: '/blog-static/:path+',
            destination: `${process.env.BLOG_DOMAIN}/blog-static/:path+`,
        }
    ];
}

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

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

توجيه الطلبات باستخدام middleware

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

export async function middleware(request) {
  const { pathname, search } = req.nextUrl;
  if (pathname === '/your-path' && myFeatureFlag.isEnabled()) {
    return NextResponse.rewrite(`${rewriteDomain}${pathname}${search});
  }
}

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

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

مشاركة الكود

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

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

إجراءات الخادم

عند استخدام إجراءات الخادم (Server Actions) مع المناطق المتعددة، يجب عليك السماح صراحةً بالأصل المواجه للمستخدم حيث قد يخدم نطاقك المواجه للمستخدم تطبيقات متعددة. في ملف next.config.js الخاص بك، أضف الأسطر التالية:

const nextConfig = {
  experimental: {
    serverActions: {
      allowedOrigins: ['your-production-domain.com'],
    },
  },
}

راجع serverActions.allowedOrigins لمزيد من المعلومات.