스크립트 구성 요소를 사용하여 Next.js의 헤더에 스크립트 삽입
P粉458913655
2023-08-25 08:55:35
<p>Next.js 애플리케이션의 모든 페이지에 있는 헤드 섹션에 Zoho라는 애플리케이션의 추적 코드를 삽입하고 싶습니다. _document.tsx라는 파일을 사용하고 있는데 잘 작동합니다. 왜곡된 스크립트의 경우 Next.js에서는 Next.js 스크립트 구성 요소(https://nextjs.org/docs/messages/no-script-tags-in-head-comComponent)를 사용할 것을 권장합니다. 지침에 따라 스크립트를 괄호 안에 삽입했지만 오류 메시지 없이 무시되었습니다._document.tsx 파일의 Head 섹션에 이 코드를 입력할 수 있나요? 별도의 구성 요소로 분할하는 것이 더 낫습니까?</p>
<p>任何建议道将有所帮助</p>
<pre class="brush:php;toolbar:false;">문서 가져오기, {
HTML,
머리,
기본,
다음스크립트,
문서컨텍스트,
DocumentInitialProps,
} "다음/문서"에서;;
"next/script"에서 스크립트 가져오기;;
MyDocument 클래스는 Document {를 확장합니다.
정적 비동기 getInitialProps(
ctx: DocumentContext
): 약속<DocumentInitialProps> {
constinitialProps = Document.getInitialProps(ctx)를 기다립니다;
return { ...initialProps };
}
렌더링() {
반품 (
<Html lang="en">
<머리>
<meta charSet="utf-8" />
<링크
href="https://fonts.googleapis.com/css?family=PT+Sans&display=선택 사항"
rel="스타일시트"
/>
<메타 이름="msapplication-TileColor" 콘텐츠="#596285" />
<메타
name="msapplication-config"
content="/favicon/browserconfig.xml"
/>
<메타 이름="테마-색상" 내용="#ffffff" />
{/* Zoho 마케팅 자동화용 */}
<스크립트 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 = "텍스트/자바스크립트";
s.async = 거짓;
if (s.readyState) {
s.onreadystatechange = 함수() {
if (s.readyState == "로드됨" || s.readyState == "완료") {
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 마케팅 자동화 종료 */}
</머리>
<본문>
<메인 />
<다음스크립트 />
<div id="알림"></div>
</body>
</Html>
);
}
}
기본 MyDocument 내보내기;</pre>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이전 게시물을 다시 읽었습니다다음 11 스크립트 태그를 추가해도 작동하지 않습니다. 스크립트가 렌더링되지 않습니다 여기에 링크 설명을 입력하세요. 그리고 Head 태그에
<Script>구성 요소를 넣을 수 없다는 것을 깨달았습니다. 또한 _document.tsx가 아니라 _app.tsx에 있어야 합니다(beforeInteractive를 사용하지 않는 한 위 링크 참조).Google Analytics 스크립트도 포함시키고 싶어서 TrackingCode라는 컴포넌트를 별도의 js 파일로 만들었습니다.
으아악내 _app.tsx 파일은 다음과 같습니다:
으아악