在Next.js中如何正确添加带onload回调的外部JS脚本

方案1：使用Next.js官方提供的next/script组件（推荐） #

Next.js 11及以上版本专门提供了Script组件优化外部脚本的加载逻辑，比直接在Head中写script标签兼容性更好，也完美支持加载完成后的回调：

// 先导入Script组件
import Script from 'next/script'
import Head from 'next/head'

// 组件内直接使用，不需要放在Head标签里
export default function StorePage() {
  return (
    <>
      <Head>
        <title>Demo store</title>
      </Head>
      <Script
        async
        type="text/javascript"
        src="/static/my_resource.js"
        // 加载完成后执行回调，直接调用挂载到window上的init方法
        onLoad={() => window.init()}
        // 如果需要和原生写法一样把脚本放到head里，可以加下面这行配置
        // strategy="beforeInteractive"
      />
      {/* 页面其他内容 */}
    </>
  )
}

方案2：继续使用Head内的原生script标签 #

如果不想用Script组件，也可以修改原来的写法，核心要注意：React体系内的事件属性必须传函数，不能传字符串形式的执行代码，所以要把onLoad的值改成函数表达式：

import Head from 'next/head'

...

<Head>
  <title>Demo store</title>
  <script
    async
    type='text/javascript'
    src='/static/my_resource.js'
    // 传函数，直接调用window上的init，加可选链避免脚本加载异常时报错
    onLoad={() => window.init?.()}
  ></script>
</Head>

原报错原因说明 #

原生HTML的onload属性支持传入字符串类型的可执行代码，但是React（Next.js基于React）的所有事件属性都是驼峰命名，且要求传入函数类型的值，你之前直接传字符串init()自然会触发类型错误。

内容的提问来源于stack exchange，提问作者artooras