Sisipkan skrip ke dalam pengepala dalam Next.js menggunakan komponen Skrip
P粉458913655
2023-08-25 08:55:35
<p>Saya mahu memasukkan kod penjejakan daripada aplikasi yang dipanggil Zoho dalam bahagian Head pada setiap halaman aplikasi Next.js saya. Saya menggunakan fail bernama _document.tsx dan ia berfungsi dengan baik. Untuk skrip yang condong, Next.js mengesyorkan menggunakan komponen Skrip Next.js (https://nextjs.org/docs/messages/no-script-tags-in-head-component). Saya mengikuti arahan dan memasukkan skrip ke dalam kurungan, tetapi ia diabaikan tanpa mesej ralat.Bolehkah saya memasukkan kod ini dalam bahagian Head pada fail _document.tsx? Adakah lebih baik untuk membahagikannya kepada komponen yang berasingan?</p>
<p>任何建议都将有所帮助</p>
<pre class="brush:php;toolbar:false;">import Dokumen, {
Html,
kepala,
utama,
NextScript,
Konteks Dokumen,
DocumentInitialProps,
} daripada "seterusnya/dokumen";
import Skrip daripada "seterusnya/skrip";
kelas MyDocument memanjangkan Dokumen {
async statik getInitialProps(
ctx: DocumentContext
): Janji<DocumentInitialProps> {
const initialProps = tunggu Document.getInitialProps(ctx);
kembalikan { ...initialProps };
}
render() {
kembali (
<Html lang="ms">
<Kepala>
<meta charSet="utf-8" />
<pautan
href="https://fonts.googleapis.com/css?family=PT+Sans&display=optional"
rel="stylesheet"
/>
<meta name="msapplication-TileColor" kandungan="#596285" />
<meta
name="msapplication-config"
content="/favicon/browserconfig.xml"
/>
<meta name="warna tema" kandungan="#ffffff" />
{/* untuk Automasi Pemasaran Zoho */}
<Skrip id="zoho-ma">
{`var w = tetingkap;
var p = w.location.protocol;
jika (p.indexOf("http") < 0) {
p = "http" + ":";
}
var d = dokumen;
var f = d.getElementsByTagName("skrip")[0],
s = d.createElement("skrip");
s.type = "teks/javascript";
s.async = palsu;
if (s.readyState) {
s.onreadystatechange = fungsi () {
jika (s.readyState == "dimuatkan" || s.readyState == "lengkap") {
s.onreadystatechange = batal;
cuba {
loadwaprops(
"myid#",
"myid#",
"myid#",
"myid#",
"0.0"
);
} tangkap (e) {}
}
};
} lain {
s.onload = fungsi () {
cuba {
loadwaprops(
"myid#",
"myid#",
"myid#",
"myid#",
"0.0"
);
} tangkap (e) {}
};
}s.src = p + "//ma.zoho.com/hub/js/WebsiteAutomation.js";
f.parentNode.insertBefore(s, f);`}
</Skrip>
{/* tamatkan automasi pemasaran Zoho */}
</Kepala>
<badan>
<Utama />
<NextScript />
<div id="pemberitahuan"></div>
</badan>
</Html>
);
}
}
eksport MyDocument lalai;</pre>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya membaca semula siaran sebelumnya11 Seterusnya dan menambah tag Skrip tidak berfungsi masukkan penerangan pautan di sini dan menyedari bahawa anda tidak boleh meletakkan komponen
<Script>dalam tag Ketua. Selain itu, ia tidak sepatutnya berada dalam _document.tsx tetapi dalam _app.tsx (melainkan anda menggunakan beforeInteractive, lihat pautan di atas).Oleh kerana saya juga ingin memasukkan skrip Google Analitis, saya mencipta komponen yang dipanggil TrackingCode sebagai fail js yang berasingan.
import Script from "next/script"; function TrackingCode() { return ( <> {/* Global site tag (gtag.js) - Google Analytics */} <Script src="https://www.googletagmanager.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;Fail _app.tsx saya adalah seperti berikut:
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} /> </> ); }