Shared Layouts Across Multi-Zone Apps

[ahmed-reyad-mylo]

In a multi-zone Next.js setup, each zone needs its own layout (header, footer, sidebar), causing duplication. I’d like to have a single “shell” app that provides the global UI, while each zone only renders into a main content area—without triggering a full page reload when navigating between zones.

Essentially:
• One shared layout (header/footer/sidebar) defined once in a shell app.
• Each zone renders only the inner page content.
• Navigation between zones should feel like client-side routing, not a full refresh.

Is there an official or recommended approach to achieve this in multi-zone setups?

[phokin4720]

There is currently no official support in Next.js for a true “shell + multiple zones” architecture where the shell provides the global layout and each zone renders only the inner page content with seamless client-side navigation.

Multi-zone apps in Next.js are still treated as separate applications, and moving between zones triggers a full page navigation. Each zone must define its own layout because layouts cannot currently be “inherited” or streamed from another zone.

However, there are a few recommended patterns depending on the architecture you want:

1. Use a single Next.js app with Route Groups
   This is the recommended pattern today. You can isolate sections like app/(zoneA)/… and app/(zoneB)/…, while sharing a global layout.tsx without duplication.

2. Use a shared UI package (monorepo)
   If zones must stay separate apps, you can move the header/footer/sidebar into a shared package and import it in each zone. This removes duplication even though each app renders the layout itself.

3. Use Microfrontends (Module Federation / Single-spa / Webpack MF)
   If you need a real “shell” that stays mounted while zones swap content, this requires a microfrontend architecture. It is not something Next.js zones provide today.

4. Embed zones inside an outer shell using an iframe
   Not recommended, but sometimes used when strict isolation is required.

Conclusion
Next.js does not currently support a single shared layout shell across multi-zones with SPA-like transitions. The recommended approach is either:

• keep everything in one Next.js app and organize it with route groups, or
• extract layouts into a shared package so each zone imports the same UI component.

Hope this helps clarify the current limitations and available approaches.