NextJS head 中的 HubSpot 表单脚本

Question

我正在尝试将以下脚本添加到我的 NextJS Head：

<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXXXXX",
    formId: "XXXXXX"
});
</script>

然后它给了我两个错误：

错误 1：意外的令牌。您是指 {'}'} 还是 }?ts(1381)（右括号）

错误 2：语法错误：意外标记，应为“}”（对于行“区域：”na1）

这是整个 indes.jsx 文件：

import Head from "next/head";
import styled from "styled-components";
import HeroSection from "../components/sections/HeroSection";
import OverviewSection from "../components/sections/OverviewSection";

const Wrapper = styled.div`
  margin-top: 10rem;
`;

export default function HomePage() {
  return (
    <Wrapper>
      <Head>
        <title>Code Shape - Home</title>
        <link rel="icon" href="/favicon.ico" />
        <script
          type="text/javascript"
          id="hs-script-loader"
          async
          defer
          src="//js.hs-scripts.com/8205013.js"
        ></script>
        <script
          charset="utf-8"
          type="text/javascript"
          src="//js.hsforms.net/forms/shell.js"
        ></script>
        <script>
          hbspt.forms.create(
          {
            region: "na1",
            portalId: "XXXXXX",
            formId: "XXXXXX",
          }
          );
        </script>
      </Head>
      <HeroSection />
    </Wrapper>
  );
}

生成表单时脚本来自 HubSpot，所以我假设脚本代码是正确的。

Answer 1

代码正在转义，尝试将其包装到 dangerouslySetInnerHTML 属性:

  <Head>
    <script dangerouslySetInnerHTML={{ __html: `
       hbspt.forms.create({
           region: "na1",
           portalId: "XXXXXX",
           formId: "XXXXXX"
       });
     `}} />
  </Head>

NextJS head 中的 HubSpot 表单脚本

HubSpot form script in NextJS head

javascript

forms

hubspot

next.js