如何在TypeScript Next.js13与JavaScript React应用间共享组件？

方案1：抽离共享组件为本地独立包 #

• 在两个项目之外新建独立的共享组件库文件夹，将需要复用的Next.js组件迁移至此，务必保证组件是纯React组件——不能依赖Next.js App Router专属API（比如next/navigation、next/image这类仅能在Next环境运行的功能）。
• 给组件库配置rollup或tsup这类打包工具，把TypeScript代码编译为JavaScript，同时生成类型声明文件（方便React JS项目参考类型提示）。
• 在两个项目中通过npm link或yarn link将本地组件库链接到项目内，之后就能像使用第三方包一样导入组件：

  import { SharedButton } from 'shared-components'
  

• 组件更新后，重新打包组件库，两个项目即可同步使用最新版本。

方案2：用Monorepo统一管理项目 #

• 借助pnpm workspaces、npm workspaces或lerna将两个项目放入同一个Monorepo，目录结构示例：

  monorepo-root/
  ├── packages/
  │   ├── next-app/  # Next.js13 App Router项目
  │   └── react-app/ # React JS项目
  └── shared/        # 共享组件目录
  

• 在shared目录存放可复用的纯React组件（用TypeScript编写），配置tsconfig.json确保编译输出符合要求。
• 在两个项目的package.json中添加对shared的依赖：

  "dependencies": {
    "shared": "workspace:*"
  }
  

• 完成配置后，就能直接在React项目中导入共享组件，组件修改后两个项目会实时同步，无需手动打包。

方案3：远程加载Next.js组件（适合低频次修改场景） #

• 在Next.js项目中，将需要共享的组件打包为UMD或ES模块，放到项目public目录，或部署到静态文件服务器。
• 在React项目中通过动态导入加载远程组件：

  const SharedComponent = React.lazy(() => import('http://your-next-app-domain/shared-component.js'));
  
  // 使用时配合Suspense处理加载状态
  function App() {
    return (
      <React.Suspense fallback={<div>Loading...</div>}>
        <SharedComponent />
      </React.Suspense>
    );
  }
  

• 注意这种方式要确保组件不依赖Next.js专属环境，同时需处理跨域问题。

核心注意事项 #

• 所有要复用的组件必须是纯React组件，不能使用Next.js App Router特有的功能（比如useRouter、服务端组件、app/目录下的路由逻辑），否则在React项目中会直接报错。
• 若组件使用TypeScript语法，要保证编译后的JS代码兼容React项目环境，同时可将类型声明文件（.d.ts）一并提供给React项目，提升开发体验。

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