nextjs_load_external_js.jsx

const loadDynamicScript = (src, callback) => {
    const existingScript = document.getElementById('scriptId');
  
    if (!existingScript) {
      const script = document.createElement('script');
      script.src = src; // URL for the third-party library being loaded.
      //script.id = 'libraryName'; // e.g., googleMaps or stripe
      document.body.appendChild(script);
  
      script.onload = () => {
        if (callback) callback();
      };
    }
  
    if (existingScript && callback) callback();
  };




state = {
        csReady:false,
        ftReady:false,
        interval: undefined
    }


    componentDidMount(){


    this.interval = setInterval(() => {

            if(this.state.csReady == false || this.state.ftReady == false){

                loadDynamicScript('js/common_scripts.min.js', () => {
                    this.setState({ csReady: true });
                    });  


           loadDynamicScript('js/functions.js', () => {
            this.setState({ ftReady: true });
               });    
         
                
            }


        }, 1);


       
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }