Next.js项目中onLoad内的函数为何无法执行？

算力阿峰

2026-8-18

问题解决：Next.js Script组件onLoad不触发且无网络请求

核心问题

你把Script组件放在了Head组件内部，这是不符合Next.js规范的操作，直接导致脚本加载逻辑失效。Script组件（尤其是使用lazyOnload这类延迟加载策略时）必须直接放在页面的body内容区域，不能嵌套在Head里。

修正后的代码

把Script组件移出Head，放到页面的根容器内即可：

import Link from 'next/link';
import Head from 'next/head';
import Script from 'next/script';

const FirstPost = () => {
  return ( 
    <div>
      <Head>
        <title> BlogPost </title> 
      </Head>
      {/* 将Script组件移到Head外部 */}
      <Script 
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() => {
          console.log("script loaded successfully");
        }}
      /> 
      <h3> first blog post in my next.js project </h3> 
      <Link href="/"> <h2> Go home </h2></Link>
    </div>
  )
}

export default FirstPost;