如何将Next.js应用封装为Script标签供客户端嵌入渲染？

直接引用.next/static/chunks下的page chunk文件无法渲染，是因为Next.js静态应用依赖完整的资源体系，单独的page chunk缺少webpack运行时、样式、依赖模块等关键内容，即便请求成功也无法完成初始化。

以下是可行的解决方案：

1. 确认使用正确的静态导出产物 #

不要用构建生成的.next目录（这是中间产物），必须执行next build && next export，导出后得到的out目录才是可对外部署的完整静态资源包。

2. 编写嵌入脚本 #

创建独立的embed-chatbot.js脚本，帮客户端完成聊天机器人的容器创建、资源加载和渲染初始化。示例代码如下：

// embed-chatbot.js
(function() {
  // 创建聊天机器人容器，可自定义样式
  const container = document.createElement('div');
  container.id = 'chatbot-root';
  container.style.position = 'fixed';
  container.style.bottom = '20px';
  container.style.right = '20px';
  container.style.width = '350px';
  container.style.height = '500px';
  container.style.border = '1px solid #eee';
  container.style.borderRadius = '8px';
  container.style.overflow = 'hidden';
  document.body.appendChild(container);

  // 加载导出页面的完整HTML内容（最简单的实现方式）
  fetch('https://你的静态服务器地址/chatbot.html')
    .then(res => res.text())
    .then(html => {
      container.innerHTML = html;
      // 执行HTML中的脚本
      const scripts = container.querySelectorAll('script');
      scripts.forEach(script => {
        const newScript = document.createElement('script');
        Array.from(script.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
        newScript.textContent = script.textContent;
        document.head.appendChild(newScript);
      });
    });
})();

3. 部署与嵌入 #

• 将out目录部署到静态服务器（比如Nginx、Vercel静态托管等）
• 让客户端在页面中嵌入你的脚本：

  <script src="https://你的静态服务器地址/embed-chatbot.js" async></script>
  

关键注意事项 #

• 所有资源路径必须是绝对路径，指向部署后的静态服务器地址
• 如果聊天机器人涉及SSR逻辑，需改成纯CSR模式，在next.config.js中配置output: 'export'确保能正确静态导出
• 测试时检查是否存在跨域问题，必要时在静态服务器配置CORS规则

内容的提问来源于stack exchange，提问作者Kedar Vyas