مقدمه
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 راهکاری قدرتمند برای ساخت میکروفرانتاندهای مستقل، قابل توسعه و قابل مدیریت است. با تفکیک مسیرها، بهینهسازی منابع، و استفاده از ابزارهای مدرن، میتوانید اپلیکیشنهایی مقیاسپذیر و سریع بسازید.