NextJS引入外部js文件

import Document, { Html, Head, Main, NextScript } from 'next/document';

<Html lang="zh">
        <Head>
          <meta name="baidu-site-verification" content="code-zK9kiC0bvo" />
          <Script id="awsc" strategy="afterInteractive">
            {`
              var _hmt = _hmt || [];
              (function() {
                var hm = document.createElement("script");
                hm.src = "https://g.alicdn.com/AWSC/AWSC/awsc.js";
                var s = document.getElementsByTagName("script")[0]; 
                s.parentNode.insertBefore(hm, s);
              })();
            `}
          </Script>
          {(this.props as any).emotionStyleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>

在组件中使用引入的模块(以阿里云的滑动验证为例)

import React from 'react';

const Me = () => {
  React.useEffect(() => {
    const nc = document.getElementById('nc');
    nc!.innerHTML = '';
    console.log(nc);
    initNc();
  }, []);

  const initNc = () => {
    (window as any).AWSC.use('ic', (state: any, module: any) => {
      // state标识状态，首次实例化会加载外部js，timeout为获取超时，loaded为已加载
      if (state === 'timeout') {
        console.log('nc timeout');
      }
      // 初始化
      (window as any).nc = module.init({
        // 应用类型标识,配置管理页签可找到对应的appkey值
        appkey: 'CF_APP_1',
        //使用场景标识，配置管理页签可找到对应的scene值
        scene: 'register',
        // 声明滑动验证需要渲染的目标ID。
        renderTo: 'nc',
        //前端滑动验证通过时会触发该回调参数。会话ID（sessionId）、签名串（sig）、请求唯一标识（token）需随业务请求一同发送至端验签
        success: function (data: any) {
          console.log('success');
          window.console && console.log(data);
        },
        // 滑动验证失败时触发该回调参数。
        fail: function (failCode: any) {
          console.log('fail');
          window.console && console.log(failCode);
        },
        // 验证码加载出现异常时触发该回调参数。
        error: function (errorCode: any) {
          console.log('error');
          window.console && console.log(errorCode);
        },
      });
    });
  };

  return (
    <>
      <div id="nc"></div>
    </>
  );
};

export default Me;