在 nextjs 区域之间共享组件的推荐方式？

Question

背景： 我正在使用 next 及其 multi zones 功能构建一个门户。这允许我们让多个 NextJS 应用程序由不同的团队独立运行，但作为一个应用程序。

问题： 我需要确保所有区域中的页眉、导航和页脚都是一致的。为此，我希望将一个组件放在一个地方，并在各个区域之间共享。

不幸的是，nextjs 本身还不支持 webpack 模块联合，因此我们无法从中受益。

我正在寻找方法来了解使用此功能的人们如何处理共享组件。 我的研究和想法仅限于一种解决方案： 为我要共享的组件创建 npm 模块，并将其导入区域中，然后在区域中传递我需要的数据。这是有代价的：对于像页眉和页脚这样的组件，至少在发布新版本的包时，我们需要确保所有区域都更新为相同的版本。所以......这并不完美，但似乎就是这样。

我尝试查看NextJS GitHub discussions，但不幸的是，那里的社区似乎不是很活跃（那里已经有人问过了，你能找到的唯一答案就是我的）。

我决定在这里试一试，因为受众范围更广，如果有更好的想法，也许你们可以给我一些启发。

Answer 1

Next.js 通过顶级标志支持 Webpack 5，请查看此文档：https://nextjs.org/docs/messages/webpack5

另外，请查看这个包，它可以让您为 Next.js 应用程序实现模块联合：https://www.npmjs.com/package/@module-federation/nextjs-mf

最后，请务必查看提供的仪表板以更好地管理模块联合：https://www.npmjs.com/package/@module-federation/dashboard-plugin