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

Posted 2023-02-22

【中文标题】在 nextjs 区域之间共享组件的推荐方式？

【英文标题】：Recommended way to share components between nextjs zones?

【发布时间】：2021-08-02 13:32:29

【问题描述】：

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

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

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

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

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

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

【参考方案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

【讨论】：

模块联合有点不同。它很棒，但不幸的是 NextJS 并没有很好地支持它。我与模块联合的一位共同创建者通了电话，他解释了他们为使其工作所做的工作......该插件当时已经过时，维护起来可能很棘手，所以我更喜欢依赖它NextJS 官方支持它。另外，此 WMF 与区域无关。我更想知道 NextJS 建议如何在区域之间共享组件（如页眉/页脚）。我是通过 npm 包来做的，因为这似乎是最好的方法。我想知道其他人是怎么做的