使用Script组件在Next.js中向头部插入脚本-PHP中文网问答

我想在我的Next.js应用程序的每个页面的Head部分中插入来自名为Zoho的应用程序的跟踪代码。我使用的是一个名为_document.tsx的文件，它正常工作。对于一个倾斜的脚本，Next.js建议使用Next.js Script组件（https://nextjs.org/docs/messages/no-script-tags-in-head-component）。我按照说明将脚本插入到括号中，但它被忽略了，没有错误消息。我可以在_document.tsx文件的Head部分输入这段代码吗？是否最好将其拆分为一个单独的组件？

任何建议都将有所帮助

import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
DocumentInitialProps,
} from "next/document";
import Script from "next/script";

class MyDocument extends Document {
 static async getInitialProps(
   ctx: DocumentContext
 ): Promise<DocumentInitialProps> {
  const initialProps = await Document.getInitialProps(ctx);
  return { ...initialProps };
}
render() {
  return (
    <Html lang="en">
      <Head>
        <meta charSet="utf-8" />
        <link
          href="https://fonts.googleapis.com/css?family=PT+Sans&display=optional"
          rel="stylesheet"
        />
        <meta name="msapplication-TileColor" content="#596285" />
        <meta
          name="msapplication-config"
          content="/favicon/browserconfig.xml"
        />
        <meta name="theme-color" content="#ffffff" />
        {/* for Zoho Marketing Automation */}
        
        <Script id="zoho-ma">
          {`var w = window;
          var p = w.location.protocol;
          if (p.indexOf("http") < 0) {
            p = "http" + ":";
          }
          var d = document;
          var f = d.getElementsByTagName("script")[0],
            s = d.createElement("script");
          s.type = "text/javascript";
          s.async = false;
          if (s.readyState) {
            s.onreadystatechange = function () {
              if (s.readyState == "loaded" || s.readyState == "complete") {
                s.onreadystatechange = null;
                try {
                  loadwaprops(
                    "myid#",
                    "myid#",
                    "myid#",
                    "myid#",
                    "0.0"
                  );
                } catch (e) {}
              }
            };
          } else {
            s.onload = function () {
              try {
                loadwaprops(
                  "myid#",
                  "myid#",
                  "myid#",
                  "myid#",
                  "0.0"
                );
              } catch (e) {}
            };
          }
          s.src = p + "//ma.zoho.com/hub/js/WebsiteAutomation.js";
          f.parentNode.insertBefore(s, f);`}
        </Script>
        {/* end Zoho marketing automation */}
      </Head>
      <body>
        <Main />
        <NextScript />
        <div id="notifications"></div>
      </body>
    </Html>
  );
 }
}

export default MyDocument;