Monorepo架构下React共享UI库定制Next.js <Link>组件的疑问

核心结论：不需要在ui-components单独安装Next.js，也不建议在packages根目录全局安装 #

1. 为什么不用给ui-components装Next.js？ #

Next.js的Link组件本质是React组件，你可以通过类型依赖+运行时依赖共享实现复用，无需在组件包中完整安装Next.js：

• 在ui-components的package.json里，把next设为peerDependencies，既声明组件对Next.js的依赖要求，又不会把Next.js打包进组件包：

  {
    "peerDependencies": {
      "next": "^13.0.0 || ^14.0.0",
      "react": "^18.0.0",
      "react-dom": "^18.0.0"
    }
  }
  

• 开发时，Monorepo的工作空间（比如pnpm workspace、npm workspaces）会自动从client包共享Next.js依赖，无需额外安装。

2. 直接给ui-components装Next.js的问题 #

• 依赖重复：会导致Monorepo中出现多个Next.js实例，可能引发React上下文冲突（比如路由状态不共享）。
• 构建冗余：组件包会打包不必要的Next.js代码，增加包体积，影响加载性能。
• 版本不一致：后续升级Next.js时，需同步更新多个包的版本，容易出现版本差异导致的兼容性问题。

3. 能不能在packages根目录安装Next.js？ #

不建议这么做：

• Monorepo根目录的依赖通常是工具类（比如eslint、typescript），而非业务框架。把Next.js装在根目录，会让所有包默认依赖这个版本，万一未来有其他app包需要不同版本的Next.js，会引发版本冲突。
• 正确做法是让业务app（比如client）作为Next.js的宿主，组件包通过peer依赖声明版本要求，由宿主提供运行时依赖。

4. 实现复用Link组件的具体步骤 #

1. 在ui-components中创建自定义Link组件，直接导入Next.js的Link：

   // packages/ui-components/src/Link.tsx
   import NextLink from 'next/link';
   import type { LinkProps } from 'next/link';
   
   interface CustomLinkProps extends LinkProps {
     children: React.ReactNode;
     className?: string;
   }
   
   export const Link = ({ children, className, ...props }: CustomLinkProps) => {
     return (
       <NextLink className={`${className} hover:text-blue-600`} {...props}>
         {children}
       </NextLink>
     );
   };
   

2. 在client包中直接导入自定义组件使用：

   // apps/client/src/pages/index.tsx
   import { Link } from '@your-workspace/ui-components';
   
   export default function Home() {
     return (
       <div>
         <Link href="/about">关于我们</Link>
       </div>
     );
   }
   

3. 确保Monorepo工作空间配置正确（比如pnpm-workspace.yaml、package.json的workspaces字段），让包之间可以互相引用。

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