ساخت میکروفرانت‌اند با Multi-Zones در Next.js – تفکیک مسیرها، کاهش حجم، و توسعه مستقل

مقدمه

Multi-Zones در Next.js روشی برای ساخت میکروفرانت‌اند است که به شما اجازه می‌دهد اپلیکیشن بزرگ را به چند اپلیکیشن مستقل تقسیم کنید. هر zone مجموعه‌ای از مسیرها را مدیریت می‌کند و می‌تواند به‌صورت جداگانه توسعه و deploy شود.

مثال کاربردی

فرض کنید مسیرهای زیر را دارید:

• /blog/* برای پست‌های بلاگ
• /dashboard/* برای صفحات داشبورد کاربران
• /* برای سایر صفحات عمومی

با Multi-Zones می‌توانید سه اپلیکیشن مستقل بسازید که همگی روی یک دامنه اجرا شوند اما به‌صورت جداگانه مدیریت شوند.

تعریف یک Zone

هر zone یک اپلیکیشن Next.js معمولی است که با assetPrefix پیکربندی می‌شود:

const nextConfig = {
  assetPrefix: '/blog-static',
}

این تنظیم باعث می‌شود فایل‌های JS و CSS با prefix مشخصی بارگذاری شوند تا با سایر zoneها تداخل نداشته باشند.

تنظیم rewrite برای نسخه‌های قدیمی‌تر

در نسخه‌های قبل از Next.js 15، ممکن است نیاز به تنظیم rewrites برای مدیریت فایل‌های استاتیک داشته باشید:

async rewrites() {
  return {
    beforeFiles: [
      {
        source: '/blog-static/_next/:path+',
        destination: '/_next/:path+',
      },
    ],
  }
}

مسیریابی درخواست‌ها به zone مناسب

برای ارسال مسیرها به zone مناسب، می‌توانید از 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+`,
    },
  ]
}

توجه: مسیرهای URL باید در هر zone منحصربه‌فرد باشند تا از تداخل جلوگیری شود.

استفاده از proxy برای روتینگ پویا

در شرایطی که نیاز به تصمیم‌گیری پویا دارید (مثلاً با feature flag)، می‌توانید از proxy استفاده کنید:

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

لینک‌دهی بین zoneها

برای لینک‌دهی بین zoneها از تگ <a> استفاده کنید، نه <Link>، چون Link تلاش می‌کند مسیر را soft navigate کند که در zone دیگر ممکن نیست.

اشتراک‌گذاری کد بین zoneها

می‌توانید zoneها را در یک monorepo قرار دهید یا از پکیج‌های NPM عمومی/خصوصی برای اشتراک‌گذاری کد استفاده کنید. استفاده از feature flag نیز برای هماهنگی بین zoneها مفید است.

پشتیبانی از Server Actions

برای استفاده از Server Actions در Multi-Zones، باید دامنه اصلی را به‌صورت صریح مجاز کنید:

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

جمع‌بندی

Multi-Zones در Next.js راهکاری قدرتمند برای ساخت میکروفرانت‌اندهای مستقل، قابل توسعه و قابل مدیریت است. با تفکیک مسیرها، بهینه‌سازی منابع، و استفاده از ابزارهای مدرن، می‌توانید اپلیکیشن‌هایی مقیاس‌پذیر و سریع بسازید.