スクリプトコンポーネントを使用してNext.jsのヘッダーにスクリプトを挿入します
<p>Zoho というアプリケーションのトラッキング コードを Next.js アプリケーションの各ページの Head セクションに挿入したいと考えています。 _document.tsx というファイルを使用していますが、正常に動作します。偏ったスクリプトの場合、Next.js では Next.js スクリプト コンポーネント (https://nextjs.org/docs/messages/no-script-tags-in-head-component) を使用することをお勧めします。指示に従ってスクリプトを括弧内に挿入しましたが、エラー メッセージが表示されずに無視されました。このコードを _document.tsx ファイルの Head セクションに入力できますか?別のコンポーネントに分割した方がよいでしょうか?</p>
<p>どんな建议都も助けてください</p>
<pre class="brush:php;toolbar:false;">ドキュメントのインポート, {
HTML、
頭、
主要、
次のスクリプト、
ドキュメントコンテキスト、
DocumentInitialProps、
"next/document" から; }
"next/script" からスクリプトをインポートします。
クラス MyDocument extends Document {
静的非同期 getInitialProps(
ctx: ドキュメントコンテキスト
): Promise {
constInitialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
与える（） {
戻る （
<HTML lang="ja">
＜頭＞
<meta charSet="utf-8" />
<リンク
href="https://fonts.googleapis.com/css?family=PT Sans&display=optional"
rel="スタイルシート"
/>
<メタ名="msapplication-TileColor"コンテンツ="#596285" />
<メタ
名前= "msapplication-config"
content="/favicon/browserconfig.xml"
/>
<メタ名="テーマカラー"コンテンツ= "#ffffff" />
{/* Zoho Marketing Automation の場合 */}
<Script 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 = "text/javascript";
s.async = false;
if (s.readyState) {
s.onreadystatechange = function () {
if (s.readyState == "ロード済み" || s.readyState == "complete") {
s.onreadystatechange = null;
試す {
ロードワプロップス(
「myid#」、
「myid#」、
「myid#」、
「myid#」、
「0.0」
);
} キャッチ (e) {}
}
};
} それ以外 {
s.onload = 関数 () {
試す {
ロードワプロップス(
「myid#」、
「myid#」、
「myid#」、
「myid#」、
「0.0」
);
} キャッチ (e) {}
};
}s.src = p "//ma.zoho.com/hub/js/WebsiteAutomation.js";
f.parentNode.insertBefore(s, f);`}
</スクリプト>
{/* Zoho マーケティング オートメーションを終了します */}
</頭>
<本体>
<メイン />
<NextScript />
<div id="通知"></div>
</ボディ>
</HTML>
);
}
}
デフォルトの MyDocument をエクスポート;</pre>
