<p>我想在我的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部分输入这段代码吗？是否最好将其拆分为一个单独的组件？</p>
<p>任何建议都会有所帮助</p>
<pre class="brush:php;toolbar:false;">导入文档，{
网页，
头，
主要的，
下一个脚本，
文档上下文，
文档初始道具，
} 来自“下一个/文档”；
从“next/script”导入脚本；
类 MyDocument 扩展文档 {
静态异步 getInitialProps(
ctx：文档上下文
): Promise
; {
const initialProps = 等待 Document.getInitialProps(ctx);
返回 { ...initialProps };
}
使成为（） {
返回 （
<头>
>
<链接
href=“https://fonts.googleapis.com/css?family=PT+Sans&display=可选”
rel="样式表";
>>
<元名称=“msapplication-TileColor”内容=“#596285” >>
<元
name="msapplication-config";
内容=“/favicon/browserconfig.xml”
>>
<元名称=“主题颜色”内容=“#ffffff” >>
{/* 对于 Zoho Marketing Automation */}
<脚本 id=“zoho-ma”>
{`var w = 窗口；
var p = w.location.protocol;
if (p.indexOf(“http”) < 0) {
p =“http”； +“：”；
}
var d = 文档；
var f = d.getElementsByTagName(“脚本”)[0],
s = d.createElement(“脚本”);
s.type = “文本/javascript”;
s.async = false;
如果（s.readyState）{
s.onreadystatechange = 函数 () {
if (s.readyState == "已加载" || s.readyState == "完成") {
s.onreadystatechange = null;
尝试 {
加载waprops(
“我的ID#”，
“我的ID#”，
“我的ID#”，
“我的ID#”，
“0.0”
）；
} 捕捉 (e) {}
}
};
} 别的 {
s.onload = 函数 () {
尝试 {
加载waprops（
“我的ID#”，
“我的ID#”，
“我的ID#”，
“我的ID#”，
“0.0”
）；
} 捕捉 (e) {}
};
}s.src = p + “//ma.zoho.com/hub/js/WebsiteAutomation.js”;
f.parentNode.insertBefore(s, f);`}
</脚本>
{/* 结束 Zoho 营销自动化 */}
</头>
<正文>
<主要>>
>
</正文>
</Html>
）；
}
}
导出默认MyDocument;</pre> 
我重新阅读了之前的帖子Next 11 and adding Script tags not working. No scripts are rendered enter link description here，意识到你不能把
<Script>组件放在Head标签中。此外，它不应该在_document.tsx中，而应该在_app.tsx中（除非你使用beforeInteractive，参见上面的链接）。因为我还想包含Google Analytics脚本，所以我创建了一个名为TrackingCode的组件作为单独的js文件。
import Script from "next/script"; function TrackingCode() { return ( <> {/* Global site tag (gtag.js) - Google Analytics */} <Script src="https://www.m.sbmmt.com/gtag/js?id=G-GOOGLEID" /> <Script id="google-analytics" strategy="afterInteractive"> {` window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-GOOGLEID'); `} </Script> {/* 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( "mycode", "mycode", "mycode", "mycode", "0.0" ); } catch (e) {} } }; } else { s.onload = function () { try { loadwaprops( "mycode", "mycode", "mycode", "mycode", "0.0" ); } catch (e) {} }; } s.src = p + "//ma.zoho.com/hub/js/WebsiteAutomation.js"; f.parentNode.insertBefore(s, f);`} </Script> {/* end Zoho marketing automation */} </> ); } export default TrackingCode;我的_app.tsx文件如下：
import "../assets/scss/material-kit.scss"; import "../node_modules/bootstrap/scss/bootstrap.scss"; import "../styles/globals.scss"; import { useEffect } from "react"; import type { ReactElement, ReactNode } from "react"; import type { NextPage } from "next"; import type { AppProps } from "next/app"; import TrackingCode from "../components/tracking-code"; import store from "../app/store"; export type NextPageWithLayout = NextPage & { getLayout?: (page: ReactElement) => ReactNode; }; type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout; }; export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { const getLayout = Component.getLayout ?? ((page) => page); useEffect(() => { typeof document !== undefined ? require("../node_modules/bootstrap/dist/js/bootstrap") : null; }, []); return getLayout( <> <TrackingCode /> <Component {...pageProps} /> </> ); }