Next 11 和添加脚本标签不起作用。没有渲染任何脚本

Question

Next 11 和添加脚本标签不起作用。没有渲染任何脚本

我将我的谷歌标签管理器添加到_app.js文件中，但它没有显示。我通过新的“脚本”标签加载的脚本都不起作用。

  <Head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <Script
      src={`https://cdn.somelink.coom/${process.env.COOKIE_KEY}/block.js`}
      strategy="beforeInteractive"
    />
    <Script
      src="https://cdn.somelink.com/scripttemplates/stub.js"
      strategy="beforeInteractive"
    />
    <Script
      src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_KEY}`}
      strategy="afterInteractive"
    />

Run Code Online (Sandbox Code Playgroud)

这些不起作用。网络选项卡等中未下载任何内容。页面上未显示任何内容。有什么想法吗？

提醒：这是在_app.js文件中。

注意：我的页面是静态生成的。

Answer 1

brc*_*-dd 60

\n
next/script不应该包裹在next/head
\n

\n

参考：脚本组件

\n

做这样的事情：

\n

import Script from "next/script";\n\nconst App = ({ Component, pageProps }) => (\n  <>\n    <Script\n      id="scriptAfterInteractive"\n      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"\n    />\n    {/* eslint-disable-next-line react/jsx-props-no-\xe2\x80\x8bspreading */}\n    <Component {...pageProps} />\n  </>\n);\n\nexport default App;\n

Run Code Online (Sandbox Code Playgroud)\n

哇，文档确实应该更多地强调这一点。2022 年 4 月的当前版本文档只是说“它使开发人员能够在应用程序中的任何位置（next/head 之外）设置第三方脚本的加载优先级，从而节省开发人员时间......”不过，看起来这是一个要求。 (10认同)
所以，这里唯一不同的是你把它移出了 <Head 标签？ (4认同)
看起来将其包装在“Html”Next 组件中也存在一些问题？如果您对此遇到困难，请尝试将脚本埋入随机组件中的某个位置，看看它是否有效，然后从那里开始工作。 (2认同)
关于 beforeInteractive 策略“仅在 _document.js 内部工作，旨在加载整个站点所需的脚本” - https://nextjs.org/docs/basic-features/script#:~:text=This%20strategy% 20仅%20works%20inside%20_document.js%20and%20是%20设计%20到%20加载%20脚本%20%20是%20需要%20by%20%20整个%20站点 (2认同)

Answer 2

Pet*_*ugh 6

除了要求Script(next/script) 不包含在Head(next/head) 中之外，它也不应该放置在自定义中_document.tsx，除非您没有strategy="beforeInteractive" 按照文档中提到的方式传递。

将 Cloudflare 分析脚本放入时，我无法加载它，但它作为in_document.tsx的同级脚本成功加载。Component_app.tsx

归档时间：	5 年，3 月前
查看次数：	25438 次
最近记录：	3 年，12 月前