Recommended way to share components between nextjs zones?

Question

Context: I'm building a portal with next and its 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, 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.

Answer 1

I am sure you figured it out by now but i just want to leave some suggestions for people who are also dealing with it.

You can create your own component library that does automatic NPM delploys with tools like Bit and Lerna which contains your shared components. However this leaves us with the problem of data fetching since we don't want to hardcode that into the component because the data fetching source or method can change in the future. Normally you could maybe provide a hook or pre-build wrapper component because we also don't want every team to re-invent the wheel. But Since we are using Next i want to statically generate the menu and footer by calling our CMS in getStaticProps.

A possible solution would be to also export the data fetching logic with the menu package so every team can just import it and use it in the getStaticProps. This way we can make sure that the different teams use the same logic to get the data for the menu.

Currently, I am looking into a different solution which is putting our front-end projects into a mono repo. Specifically, I am looking at Turbo-repo since it was acquired by Vercel last year and thus plays really well with Nextjs. Because all the code is in the same repo different teams can just import it in every project.