如何在两个NextJs项目间共享ReactJs组件？可行方案咨询

单独抽离组件为公共 repo 是否合理 #

这个做法完全合理，在你的场景下收益非常明确：

• 避免重复开发，组件的Bug修复、样式迭代、功能升级只需要维护一次，两个项目可以同步生效
• 统一电商站点和运营后台的视觉规范，不会出现同类型组件两边交互、样式不一致的问题
• 后续如果新增同技术栈的业务项目，可以直接接入复用，扩展成本很低

用 Next.js 搭建纯组件仓库是否值得推荐 #

这个方案不推荐直接使用，但可以复用 Next.js 的初始化配置能力降低配置成本，具体原因如下：

• Next.js 是面向站点/全栈应用开发的框架，默认构建产物是适配站点部署的页面、服务端 bundle，不是可被外部项目导入的ES/UMD模块，无法直接作为组件库对外提供
• 你完全可以借用 create-next-app 初始化得到现成的 TypeScript、ESLint、PostCSS 配置，不需要从零手写配置，之后只要删掉 Next.js 专属的页面、路由逻辑，接入适配组件库的构建工具（比如tsup、Rollup、Vite 库模式）即可
• 如果需要组件调试、演示的文档页面，你甚至可以保留 Next.js 的 pages 目录用来写组件 Demo，相当于组件源码和文档站在同一个仓库，开发调试更方便，只要最终对外发布的是构建工具输出的组件包即可

额外实践建议 #

• 如果你的两个 Next.js 项目用 monorepo 管理，不需要单独发布 npm 包，直接通过 workspace 引入公共组件包即可，开发效率更高
• 如果两个项目是独立仓库，公共组件库构建完成后可以发布到内部 npm 源，两个项目分别安装依赖即可
• 如果组件中用到了 Next.js 专属 API（比如next/link、next/image），建议做 peer 依赖声明，要求使用方的 Next.js 版本匹配，避免导入后运行报错

内容的提问来源于stack exchange，提问作者Nico