This article is a follow-up to From Independent Microsites to Context-Driven Architecture , where we explain why we split our frontend into multiple independent Next.js repositories.

If you'd rather explore the code before reading the architecture behind it, a small demo is available here: https://github.com/Subito-it/articles-code/tree/main/olympus-mini

The Problem Everyone in a Micro-Frontend Setup Hits

Your production environment has a smart edge router: Akamai, Cloudflare, nginx, whatever, that maps URL paths to different frontend applications:

/search → next.js app A /ads → next.js app B /profile → next.js app C

Enter fullscreen mode

Exit fullscreen mode

It works beautifully in production. Then you open your laptop.

Each app runs on its own port, and suddenly you're managing this:

localhost:3001 → app A localhost:3002 → app B localhost:3003 → app C

Enter fullscreen mode

Exit fullscreen mode

Two things break immediately:

Cross-app links stop working.…