**Context:**
I'm building a portal with next and its [multi zones](https://nextjs.org/docs/advanced-features/multi-zones) feature. This allows us to have multiple NextJS applications running independently by different teams, but as a single app.

**The problem:**
I need to make sure header, navigation and footer, in all zones, are consistent. For that, I want to have a component in 1 place, and share it across the zones.

Unfortunately, webpack modules federation is not yet supported natively by nextjs so we can't benefit from it.

I am searching on ways to find out how people using this feature are dealing with shared components.
My research and thoughts are limited to one single solution:
Create npm module for components I want to share, and import it in the zones, and then pass the data I need in the zones. This comes with a price: For components like header and footer, at least, when a new version of the package is released, we need to make sure all zones are updated with the same version. So... it's not perfect but seems to be the way.

I tried to check [NextJS GitHub discussions](https://github.com/vercel/next.js/discussions?discussions_q=shared%20components), but unfortunately, the community there doesn't seem to be very active (someone asked it already there, and the only answer you can find there about it is mine).

I decided to give it a try asking this here since the audience is wider and maybe you guys could shed me some lights if there are better ideas.