Next.js 11.x引入外部同步脚本触发ESLint报错如何解决

报错原因 #

该报错是Next.js内置ESLint规则@next/next/no-sync-scripts触发的校验，该规则禁止直接在<Head>组件内插入同步加载的外部<script>标签，避免同步脚本阻塞页面首屏渲染。

正确引入方式 #

推荐使用Next.js 11内置的next/script组件引入外部JS，可根据实际使用场景选择对应的加载策略，完全符合ESLint校验规则：

第一步：导入Script组件 #

在对应文件头部先引入组件：

import Script from 'next/script'

第二步：替换原有script标签 #

不要将Script组件放在<Head>组件内部，直接放在页面组件或_app.js的根层级即可，常用加载策略如下：

• strategy="beforeInteractive"：脚本在页面可交互前加载，适合核心基础脚本，会注入到HTML的<head>标签内，在Next.js打包生成的页面脚本之前加载
• strategy="afterInteractive"：默认策略，脚本在页面可交互后加载，适合统计、广告等优先级不高的脚本
• strategy="lazyOnload"：脚本在浏览器空闲时加载，优先级最低

示例代码：

// pages/_app.js 示例
import Head from 'next/head'
import Script from 'next/script'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" type="text/css" href="http://www.externalsite.com/style.css" />
      </Head>
      {/* 外部JS通过Script组件引入，无需放入Head内 */}
      <Script 
        src="https://www.websote.com/viewer.min.js"
        strategy="afterInteractive"
        // 若需要脚本加载完成后执行逻辑，可添加onLoad回调
        onLoad={() => {
          console.log('viewer.min.js 加载完成')
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

临时绕过方案（不推荐） #

如果仅需要绕开ESLint校验，不需要优化加载逻辑，可在报错的script标签上方添加单行规则禁用注释：

<Head>
  {/* eslint-disable-next-line @next/next/no-sync-scripts */}
  <script src="https://www.websote.com/viewer.min.js"></script>
</Head>

该方式仅跳过校验，未解决同步脚本阻塞渲染的本质问题，仅可作为临时处理方案使用。

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