javascript - Recommended way to share components between nextjs zones? - Stack Overflow

admin管理员组

文章数量:1392116

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 ponent 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 ponents. My research and thoughts are limited to one single solution: Create npm module for ponents I want to share, and import it in the zones, and then pass the data I need in the zones. This es with a price: For ponents 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 munity 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.

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 ponent 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 ponents. My research and thoughts are limited to one single solution: Create npm module for ponents I want to share, and import it in the zones, and then pass the data I need in the zones. This es with a price: For ponents 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 munity 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.

• javascript
• reactjs
• next.js
• micro-frontend

Share Improve this question Follow asked May 12, 2021 at 7:50 sergioviniciusssergioviniciuss 4,69633 gold badges3939 silver badges5050 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

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

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

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

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 ponent library that does automatic NPM delploys with tools like Bit and Lerna which contains your shared ponents. However this leaves us with the problem of data fetching since we don't want to hardcode that into the ponent because the data fetching source or method can change in the future. Normally you could maybe provide a hook or pre-build wrapper ponent 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.

本文标签： javascriptRecommended way to share components between nextjs zonesStack Overflow