如何将Next.js中的Chatbot组件转为<script>标签供第三方网站使用？

问题 #

我在Next.js应用中有一个可正常运行的Chatbot组件，希望实现让任何人都能通过<script>标签在自己的网站中集成该组件的功能。

我尝试将ChatbotComponent放入Bot.js文件，代码如下：

function ChatbotComponent() {
  return (
    // Your chatbot component JSX goes here
    <div>
      <h1>Chatbot Content</h1>
      {/* Additional chatbot UI */}
    </div>
  );
}

function renderChatbot() {
  const container = document.createElement('div');
  document.body.appendChild(container);

  ReactDOM.render(<ChatbotComponent />, container);
}

renderChatbot()

之后新建项目，通过以下方式引入该文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="http://localhost:3000/Bot.js" defer></script>
  </head>
  <body></body>
</html>

但出现了报错，推测是因为React文件未转换为浏览器可读取的JavaScript代码。想知道哪里出错了，以及如何实现该功能。

错误原因 #

• JSX未编译：浏览器原生无法识别JSX语法，必须转译为普通JavaScript代码才能执行。
• React/ReactDOM依赖缺失：Bot.js中调用了ReactDOM.render()，但引入脚本的页面未提前加载React和ReactDOM资源，浏览器找不到这些全局变量。
• Next.js专属API依赖（潜在问题）：如果ChatbotComponent使用了Next.js特有的API（如useRouter、next/image），直接提取到独立文件会因缺少运行环境报错。

实现方案 #

方案1：CDN加载React+手动编译JSX #

适合简单组件，快速验证功能：

1. 修改嵌入页面：先加载React和ReactDOM的CDN资源，再引入编译后的脚本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 优先加载React生产环境包 -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <!-- 引入编译后的Bot脚本 -->
    <script src="http://localhost:3000/Bot-compiled.js" defer></script>
  </head>
  <body></body>
</html>

2. 编译Bot.js的JSX：将JSX转译为React.createElement调用，修改后的Bot.js：

function ChatbotComponent() {
  return React.createElement(
    'div',
    null,
    React.createElement('h1', null, 'Chatbot Content')
    // 其他UI元素同理转译为React.createElement格式
  );
}

function renderChatbot() {
  const container = document.createElement('div');
  document.body.appendChild(container);
  // React 18+ 推荐使用createRoot替代旧版render
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(ChatbotComponent));
}

renderChatbot();

复杂组件可使用Babel在线编译工具批量转换JSX。

方案2：Next.js打包成UMD模块（推荐） #

适合复杂组件，保留Next.js开发体验，生成可嵌入的独立脚本：

1. 创建独立入口文件：在Next.js项目中新建pages/chatbot-embed.js，导出全局可调用的渲染函数：

import React from 'react';
import ReactDOM from 'react-dom/client';
import ChatbotComponent from '../components/ChatbotComponent';

// 挂载到window对象，供外部页面调用
window.renderChatbot = function() {
  const container = document.createElement('div');
  document.body.appendChild(container);
  const root = ReactDOM.createRoot(container);
  root.render(<ChatbotComponent />);
};

2. 配置Next.js打包规则：修改next.config.js，指定输出为UMD模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  webpack: (config) => {
    config.output.library = {
      name: 'ChatbotEmbed',
      type: 'umd',
    };
    return config;
  },
};

module.exports = nextConfig;

3. 打包部署：运行npm run build，在.next/standalone目录下找到编译后的脚本，部署到静态资源服务器。
4. 用户嵌入方式：用户只需加载脚本并调用初始化函数：

<script src="https://your-domain.com/chatbot-embed.js" defer></script>
<script>
  // 页面加载完成后初始化聊天机器人
  window.addEventListener('load', () => {
    window.renderChatbot();
  });
</script>

内容的提问来源于stack exchange，提问作者Muhammad Talha