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

问题描述 投票:0回答:1

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

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

我想要这样的东西:

<script>
  window.calendarConfig = {
    userId: "xxxx",
  }
</script>
<script
  src="https://www.mywebsite.com"
  id="xxxx">
</script>
widget next.js13 embeddable
1个回答
0
投票

请参阅此处:如何为第三方网站创建可嵌入的 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
文件即可。

© www.soinside.com 2019 - 2024. All rights reserved.