如何在 next.js 中仅在某个页面上嵌入 <script> 小部件？答案

【问题标题】：How to embed a <script> widget in next.js only on a certain page?如何在 next.js 中仅在某个页面上嵌入 <script> 小部件？
【发布时间】：2022-06-28 01:07:09
【问题描述】：

我正在尝试加载一个将“给我买杯咖啡”小部件嵌入到网站的外部脚本。除非我将脚本放在_app.js 文件中，否则我无法执行脚本。但是通过将脚本添加到_app.js 文件，小部件会加载到每个页面上。我只希望它加载在一个页面上，所以我尝试将脚本添加到我希望它加载的页面的头部：

<Head>
// Some content
  <Script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="some-id" data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"/>
</Head>

这不起作用，文档说要在 Head 标签之外添加 Script 标签，所以我将脚本移到 head 标签之外，如下所示：

<Head>
// Some content
</Head>
<Script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="some-id" data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"/>

但这仍然不起作用。除非我将脚本放入 _app.js 文件中，否则该小部件不会加载到网站上。

我已经阅读了关于 next.js 的 Script 和 Head 标记的文档，但这并没有帮助解决这个问题。我绝对可以使用一些帮助来使其正常工作。

【问题讨论】：

您是否尝试将strategy="beforeInteractive" 属性添加到Script 组件。
我有，并且我也尝试了其他两种加载策略。我不确定这是否重要，但我尝试在其上实现此小部件的页面位于登录页面的后面

标签： next.js

【解决方案1】：

我遇到了同样的问题，这就是在 next.js 中添加第三方脚本的方式。

<Head>
// Some content
</Head>
<Script
    strategy="lazyOnload"
    onLoad={() =>
      (function (d, s, id) {
        var js,
          el = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.async = true;
        js.src =
          "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js";
        js.id = id;
        js.charset = "UTF-8";
        el.parentNode.insertBefore(js, el);
      })(document, "script", "buymeacoffee-js")
    }
  />

【讨论】：