11

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.

sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50

2 Answers2

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.

Rene van Dijk
  • 13
  • 4
  • 1
    this is exactly what we're doing, but since the beginning with a monorepo using lerna and yarn workspaces. We created our own zones-generator with the basic required logic in it, and added instructions for those who need to build it in the same portal, to keep the same header and footer. Then in the code reviews we just make sure everything is aligned. I was expecting a more appropriated solution from Vercel team, but everywhere I looked, I felt I was the only one providing the answers, and it's mainly the same as you're doing. At the moment I can only assume we're right. – sergioviniciuss Mar 15 '22 at 13:57
0

Webpack 5 is supported by Next.js through a top level flag, take a look at this documentation: https://nextjs.org/docs/messages/webpack5

Also, checkout this package that lets you achieve Module Federation for Next.js apps: https://www.npmjs.com/package/@module-federation/nextjs-mf

Lastly, be sure to checkout the provided dashboard to better manage module federation: https://www.npmjs.com/package/@module-federation/dashboard-plugin

leog
  • 778
  • 10
  • 15
  • Modules federation is a bit different. It's awesome, but unfortunately not very well supported by NextJS. I had a call with one of the co-creators of module federation and he explained what they do to make it work... The plugin was outdated in the time and it can be tricky to maintain, so I prefer to rely on it when NextJS officially supports it. Plus, this WMF is not related to Zones. I'm more interested to know how NextJS recommends to share components between the zones (like header/footer). I'm doing it via npm packages as it seems the best approach. I'd like to know how others are doing it – sergioviniciuss Jun 22 '21 at 07:22