如何为第三方网站创建可嵌入的 next.js (react) 组件？

Question

我正在尝试为我们的客户创建小部件以粘贴（嵌入）到他们自己的网站中。

理想情况下由第三方使用，如下所示：

example.html

<div id="example"></div>
<script src="https://example.com/widgets/example.bundle.js"></script>
<script>
Example.init({
    selector: "#example",
    name: "example"
});
</script>

我只是不知道如何使用 next.js 将特定入口点“捆绑”到单个文件中。

我正在使用从 GitHub 构建的 Vercel，所以理想情况下我希望在构建时生成这些包，而不会破坏现有的 next.js 站点。

我试过的：

next.config.js

module.exports = {
    entry: {
        example: './pages/example.js'
    },
    output: {
        path: "./public/widgets",
        filename: '[name].bundle.js'
    }
}

结果：

这没有任何效果，我不明白为什么！:(

有用的来源：

Github（Next.js 讨论）：添加一个 Webpack 条目以与 main.js 分开加载

Next.js：自定义 Webpack 配置

Next.js：设置自定义构建目录

Next.js：exportPathMap

Stackoverflow：使用 React 和 Webpack 编写可嵌入的 Javascript 插件

Webpack：配置文档

Answer 1

首先，您想要的嵌入/初始化格式（这当然是可嵌入小部件的典型格式）要求加载的脚本创建Example全局对象，然后您可以在该对象上调用.init()，然后将您的小部件 html 呈现到选择器中指定的标签中。

Next 创建一个完整的页面，而不是一个可以如上所述调用的对象。

要改变这一点，您需要覆盖 Next 服务器以绕过app.render()特定 url的整个过程，而是创建Example对象，它自己调用ReactDOM.render()on .init()。

您还需要解决两种可能的情况，即嵌入您的小部件的网页可以是基于 React 的页面，也可以不是。所以你要么需要使用已经加载的 ReactDOM 要么让浏览器在渲染小部件之前加载 React。

虽然所有这些都是可行的，但要做到健壮并不容易，而且在 NextJS 中做这件事会变得更加麻烦。我的建议是以这样的方式构建 NextJS 应用程序的代码，即您在小部件中需要的部分是您可以在 NextJS 主应用程序和使用普通 CRA 的单独可嵌入小部件中使用的组件。

一些进一步的阅读：

https://selleo.com/blog/how-to-create-embedded-react-widget （虽然不是 iFrame 部分）

https://meda.io/embed-react-into-an-html-web-page/