Building Micro-Frontends with Multi-Zones in Next.js – Route Isolation, Independent Deployment, and Shared Code

Introduction

Multi-Zones in Next.js are a powerful way to build micro-frontends by splitting a large app into smaller, independent applications. Each zone handles a distinct set of routes and can be deployed separately, improving build times and modularity.

Use Case Example

Imagine you have the following route groups:

• /blog/* for blog posts
• /dashboard/* for user dashboard pages
• /* for public pages

With Multi-Zones, you can create three separate Next.js apps that share the same domain but are developed and deployed independently.

Defining a Zone

Each zone is a standard Next.js app with an assetPrefix to avoid asset conflicts:

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

This ensures that JS and CSS files are scoped to each zone and served under /assetPrefix/_next/....

Rewrite Setup for Older Versions

In versions before Next.js 15, you may need to add a rewrite rule for static assets:

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

Routing Requests to the Correct Zone

Use rewrites to forward paths to the correct zone:

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+`,
    },
  ]
}

Note: Each zone must serve unique paths to avoid routing conflicts.

Using Proxy for Dynamic Routing

For dynamic routing decisions (e.g. feature flags), use proxy logic:

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

Linking Between Zones

Use <a> tags instead of <Link> when linking across zones to avoid prefetching and soft navigation issues.

Sharing Code Across Zones

Zones can live in separate repositories or a monorepo. Shared code can be distributed via public/private NPM packages. Feature flags help coordinate releases across zones.

Supporting Server Actions

To use Server Actions across zones, explicitly allow your domain:

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

Conclusion

Multi-Zones in Next.js offer a scalable architecture for micro-frontends. By isolating routes, optimizing assets, and enabling independent deployment, you can build modular, high-performance applications with ease.