Understanding Next.js Multi-Zones

Multi-Zones are Next.js's answer to micro-frontends. They let you split a large monolithic Next.js app into smaller, independently deployable applications — each serving a different set of URL paths — all appearing as one site to the user.

When to Use Multi-Zones

Multi-Zones shine when: - Different parts of your site are owned by different teams - You want to deploy sections independently without affecting others - Build times are growing unmanageable - You're migrating from an old framework incrementally

Architecture

Each zone is a separate Next.js app. One zone acts as the **host** (or gateway) and uses `rewrites` to proxy requests to the other zones:

// Marketing zone (host) next.config.ts
async rewrites() {
  return [
    { source: '/blog', destination: `${process.env.BLOG_DOMAIN}/blog` },
    { source: '/blog/:path*', destination: `${process.env.BLOG_DOMAIN}/blog/:path*` },
  ];
}

Non-host zones set an `assetPrefix` and `basePath`:

// Blog zone next.config.ts
const nextConfig = {
  assetPrefix: '/blog-static',
  basePath: '/blog',
};

Cross-Zone Navigation

The key gotcha: use `<a>` tags (not Next.js `<Link>`) for cross-zone links. This forces a full page navigation, which is required because the JavaScript bundle of one zone can't soft-navigate into another zone.

Conclusion

Multi-Zones are a powerful tool for large organisations that need team autonomy without sacrificing the user experience of a unified domain.