如何在 NEXTJS 中添加脚本标签？

Question

I am trying to add sumome to my next application.

They provided this code

 <script async>(function(s,u,m,o,j,v){j=u.createElement(m);v=u.getElementsByTagName(m)[0];j.async=1;j.src=o;j.dataset.sumoSiteId='xxxxxxxxxxxxxxxxxxxxxxxxxxx';v.parentNode.insertBefore(j,v)})(window,document,'script','//load.sumo.com/');</script>

I know next has its own script tag but I was unable to set it up correctly using it. So, I need some help here. Thank you.

Answer 1

Import Script from next/script

and use it like this:

import Script from 'next/script'

...

<Script
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
    (function(s,u,m,o,j,v){j=u.createElement(m);v=u.getElementsByTagName(m)[0];j.async=1;j.src=o;j.dataset.sumoSiteId='xxxxxxxxxxxxxxxxxxxxxxxxxxx';v.parentNode.insertBefore(j,v)})(window,document,'script','//load.sumo.com/');
  `,
  }}
/>