我想将我的 nextjs 13 网站的特定组件作为小部件嵌入到其他网站,而不使用 iframe 方法。
我正在使用 Next.js 13 应用程序路由器。假设我有一个组件,我想让用户将其嵌入到他们的网站上。 page.tsx 内部有多个组件,但我特别希望该组件是可嵌入的。 是否有任何 npm 包或其他方法可用于执行此操作?
我想要这样的东西:
<script>
window.calendarConfig = {
userId: "xxxx",
}
</script>
<script
src="https://www.mywebsite.com"
id="xxxx">
</script>
请参阅此处:如何为第三方网站创建可嵌入的 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
文件即可。