Multi-Zones is a Next.js micro-frontend architecture that splits a large application on a single domain into smaller, independent Next.js apps, each responsible for a distinct set of routes, allowing independent development, build, and deployment[citation:1][citation:6].
Multi-Zones is an approach to implementing micro-frontends in Next.js[citation:6][citation:8]. Instead of building a single monolithic application, a domain is separated into smaller, decoupled Next.js applications called "zones"[citation:1]. Each zone is a fully functional Next.js app that handles a specific set of URL paths (e.g., /blog, /dashboard), and they are all stitched together under a single domain to create a unified user experience[citation:1][citation:10].
Asset Prefix: To prevent asset collisions, each zone uses an
assetPrefix(e.g.,/blog-static) in itsnext.config.js, ensuring its static files are served from unique paths[citation:1][citation:10].Routing: An HTTP proxy (like a main Next.js app, Nginx, or AWS Amplify) uses
rewritesto route incoming requests to the correct zone based on the URL path[citation:1][citation:10]. Middleware can also be used for dynamic routing decisions[citation:2][citation:7].Independent Deployments: Each zone is a separate codebase and can be built and deployed independently. This is a primary benefit, as updating one zone does not require rebuilding the others[citation:1][citation:6].
Cross-Zone Navigation: Navigating within a zone is a soft (client-side) navigation, while navigating between zones triggers a hard navigation (page reload)[citation:1][citation:10].