如何在Next JS组件中嵌入HubSpot表单？新手求助

为什么直接在组件div里放嵌入代码不行？ #

HubSpot表单依赖外部脚本加载，直接在组件里写静态脚本，Next.js的渲染机制会导致脚本要么在DOM元素生成前执行（找不到目标容器），要么重复加载引发冲突，所以表单出不来。

具体实现步骤 #

1. 把组件改成客户端组件 #

因为要操作DOM和加载脚本，必须在component.jsx顶部加上'use client'指令（这是App Router里客户端组件的标识）：

'use client';

import { useEffect } from 'react';

export default function HubSpotForm() {
  // 后续逻辑写这里
}

2. 用useEffect按需加载脚本并渲染表单 #

在组件内部用useEffect确保DOM挂载后再加载脚本，避免找不到目标元素：

'use client';

import { useEffect } from 'react';

export default function HubSpotForm() {
  useEffect(() => {
    // 替换成你的HubSpot门户ID和表单GUID（从HubSpot表单嵌入页面复制）
    const portalId = '你的门户ID';
    const formGuid = '你的表单GUID';
    const containerId = 'hubspot-form-container';

    // 创建并加载HubSpot表单脚本
    const script = document.createElement('script');
    script.src = 'https://js.hsforms.net/forms/v2.js';
    script.async = true;
    
    // 脚本加载完成后渲染表单
    script.onload = () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId,
          formId: formGuid,
          target: `#${containerId}`
        });
      }
    };

    document.body.appendChild(script);

    // 清理函数：防止路由切换后重复加载脚本和表单
    return () => {
      document.body.removeChild(script);
      const container = document.getElementById(containerId);
      if (container) container.innerHTML = '';
    };
  }, []);

  // 表单的挂载容器
  return <div id="hubspot-form-container"></div>;
}

3. 在page.jsx中导入使用组件 #

直接在page.jsx（服务器组件）里导入这个客户端组件即可：

import HubSpotForm from '@/components/component.jsx';

export default function HomePage() {
  return (
    <div className="home-page">
      {/* 其他页面内容 */}
      <HubSpotForm />
    </div>
  );
}

常见错误排查 #

• 漏加'use client'：服务器组件不能用useEffect和操作DOM，必须声明为客户端组件。
• ID/GUID填错：去HubSpot的表单嵌入页面复制准确的门户ID和表单GUID，别手动输错。
• 脚本重复加载：清理函数一定要移除脚本和容器内容，避免路由切换后表单重复出现。

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