背景： 我正在使用 Next.js 和它的多区域功能来构建一个门户网站。这允许我们有多个独立运行的 Next.js 应用程序，由不同的团队管理，但作为单个应用程序。
问题：我需要确保所有区域中的页眉、导航和页脚都是一致的。为此，我想在一个位置拥有组件，并在各个区域之间共享它。
不幸的是，Webpack 模块联邦尚未被 Next.js 原生支持，因此我们无法受益于它。
我正在研究人们如何处理共享组件的方法。
我的研究和思考仅限于一个解决方案：
为我想要共享的组件创建 npm 模块，并在各个区域中导入它，然后传递我需要的数据。这是有代价的：对于像标题和页脚这样的组件，在发布新版本时，我们需要确保所有区域都使用相同的版本号。所以...虽然不完美，但看起来似乎是唯一的方法。
我试图查看NextJS GitHub 讨论，但不幸的是，那里的社区似乎不太活跃（有人已经在那里提出了这个问题，你能找到的唯一答案就是我的回答）。
我决定在这里尝试询问，因为受众更广，也许你们可以为我提供更好的想法。
我相信你已经明白了，但我想为那些也在处理此问题的人提供一些建议。
您可以创建自己的组件库，使用Bit和Lerna等工具进行自动NPM部署，其中包含您共享的组件。然而，这给我们留下了数据获取的问题，因为我们不希望将其硬编码到组件中，因为数据获取源或方法可能会在未来发生变化。通常，您可以提供一个钩子或预构建包装器组件，因为我们也不希望每个团队都重新发明轮子。但由于我们正在使用Next，我希望通过在getStaticProps中调用我们的CMS静态生成菜单和页脚。
一个可能的解决方案是将数据获取逻辑与菜单包一起导出，以便每个团队都可以只需导入它并在getStaticProps中使用它。这样，我们可以确保不同的团队使用相同的逻辑来获取菜单数据。
目前，我正在研究另一种解决方案，即将我们的前端项目放入单存储库中。具体而言，我正在查看Turbo-repo，因为它于去年被Vercel收购，因此与Nextjs非常兼容。因为所有代码都在同一个存储库中，所以不同的团队可以在每个项目中导入它。
Webpack 5通过顶级标志得到Next.js的支持，请查看此文档：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
