nextjs script doesn't work after router has changed

Question

My external scripts stop to work after the router changes (**When the user click on any link**)

inside _app.js

  import Script from "next/script";

        <Script
          async
          type="text/javascript"
          src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
        />
  

What it look like on first render

What it look like after router changes

What i tried so far

Put it inside the Head tag - this makes it not work at all.

Put the scripts inside _document, this makes the same error.

Answer 1

Add the bellow script on your main layout.

Import useEffect and useRouter

import { useEffect } from "react";
import { useRouter } from "next/router";

Assign file path to scripts object.

let scriptRefArr = []

  const { route } = useRouter()

  useEffect(() => {
    if (route) {
      const scripts = ['/assets/libs/tiny-slider/min/tiny-slider.js', '/assets/libs/tobii/js/tobii.min.js', '/assets/libs/feather-icons/feather.min.js', '/assets/js/plugins.init.js', '/assets/js/app.js'];

      for (let item of scripts) {
        loadScript(item);
      }
    }

    return () => {
      if (scriptRefArr.length > 0) {
        removeScript()
      }

    }

  }, [route]);

  const loadScript = (src) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    if (!scriptRefArr.find(item => item.url === src)) {
      document.body.appendChild(script);
      scriptRefArr.push({ url: src, script })
    }
  }

  const removeScript = () => {
    scriptRefArr.forEach(item => {
      if (document.body.contains(item.script)) {
        document.body.removeChild(item.script);
      }
    })

  }