如何使 Next.js 组件可嵌入？

Question

我想将我的 nextjs 13 网站的特定组件作为小部件嵌入到其他网站，而不使用 iframe 方法。

我正在使用 Next.js 13 应用程序路由器。假设我有一个组件，我想让用户将其嵌入到他们的网站上。 page.tsx 内部有多个组件，但我特别希望该组件是可嵌入的。 是否有任何 npm 包或其他方法可用于执行此操作？

我想要这样的东西：

<script>
  window.calendarConfig = {
    userId: "xxxx",
  }
</script>
<script
  src="https://www.mywebsite.com"
  id="xxxx">
</script>

Answer 1

请参阅此处：如何为第三方网站创建可嵌入的 next.js (react) 组件？

简短的回答是，这可能不可能或至少不切实际。

NextJS 根本不打算以您想要的方式捆绑单个组件。

相反，您可以使用独立的 React 或 CRA 应用程序。使用 webpack，您可以将所需的组件捆绑到单个

bundle.js

文件中，您可以将其作为小部件分发。

例如，

webpack.config.js

：

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  // rest of webpack config...
}

在

src/index.tsx

：

import { MyWidget } from "nextjs/src/components/MyWidget" // your NextJS directory, using monorepo

const rootElement = document.querySelector("#root");

const root = createRoot(rootElement!);
root.render(<MyWidget />);

您可以使用 monorepo 方法来避免代码重复。在与 NextJS 项目同一级别创建一个单独的目录。这是使用 SvelteKit 的 monorepo 共享 Typescript 代码的指南，对于 NextJS 来说几乎相同 - 只需配置您的

tsconfig.json

文件即可。