将外部脚本集成到nextJS

Question

我想将markr.io的脚本集成到我的nextJS应用程序中，它应该加载在每个页面上，下面是片段：

<script>
window.markerConfig = {
destination: 'mykeysecret', 
source: 'snippet'
};
</script>
<script>
!function(e,r,a){if(!e.__Marker){e.__Marker={};var t=[],n={__cs:t};["show","hide","isVisible","capture","cancelCapture","unload","reload","isExtensionInstalled","setReporter","setCustomData","on","off"].forEach(function(e){n[e]=function(){var r=Array.prototype.slice.call(arguments);r.unshift(e),t.push(r)}}),e.Marker=n;var s=r.createElement("script");s.async=1,s.src="https://edge.marker.io/latest/shim.js";var i=r.getElementsByTagName("script")[0];i.parentNode.insertBefore(s,i)}}(window,document);
</script>

我尝试使用内置的nextjs<脚本/>功能，但我没能让它发挥作用。

Answer 1

由于Marker.io没有提供专用的Next.js插件(但(，因此建议使用<Script>组件中的dangerouslySetInnerHTML属性进行集成。

示例：

<Script
strategy="beforeInteractive"
dangerouslySetInnerHTML={{
__html: `
window.markerConfig = {
destination: '<REPLACE_ME>', 
source: 'snippet'
};
!function(e,r,a){if(!e.__Marker){e.__Marker={};var t=[],n={__cs:t};["show","hide","isVisible","capture","cancelCapture","unload","reload","isExtensionInstalled","setReporter","setCustomData","on","off"].forEach(function(e){n[e]=function(){var r=Array.prototype.slice.call(arguments);r.unshift(e),t.push(r)}}),e.Marker=n;var s=r.createElement("script");s.async=1,s.src="https://edge.marker.io/latest/shim.js";var i=r.getElementsByTagName("script")[0];i.parentNode.insertBefore(s,i)}}(window,document);
`,
}}
/>

有用的链接：

• Next.js文档：脚本组件
• 类似的GitHub问题(已解决(

Answer 2

还有另一种使用dangerouslySetInnerHTML注入脚本的方法：

<script
dangerouslySetInnerHTML={{
__html: `!function(e,r,a){if(!e.__Marker){e.__Marker={};var t=[],n={__cs:t};["show","hide","isVisible","capture","cancelCapture","unload","reload","isExtensionInstalled","setReporter","setCustomData","on","off"].forEach(function(e){n[e]=function(){var r=Array.prototype.slice.call(arguments);r.unshift(e),t.push(r)}}),e.Marker=n;var s=r.createElement("script");s.async=1,s.src="https://edge.marker.io/latest/shim.js";var i=r.getElementsByTagName("script")[0];i.parentNode.insertBefore(s,i)}}(window,document);`,
}}
/>