使用beforeInteractive策略的NextJS Script触发位置错误

你遇到的警告是因为Next.js的<Script>组件在JSX结构中的放置位置不符合框架的处理逻辑——虽然最终渲染后的<script>标签出现在<head>中，但JSX里的写法导致Next.js无法正确识别它的加载顺序规则。

具体原因 #

你当前的JSX把<Script>直接放在<html>标签下，和<body>同级，没有嵌套在Next.js的<head>组件内部。Next.js的<Script>组件需要明确放在<head>或<body>组件中，框架才能根据你指定的strategy正确管理脚本的加载顺序和执行时机，否则会触发同步/延迟脚本的顺序校验警告。

解决方法 #

调整根布局的JSX结构，把<Script>组件嵌套到<head>标签内部：

export default function RootLayout({ children }) {
  return (
    <html lang="it">
      <head>
        <Script 
          src="https://js.hsforms.net/forms/v2.js" 
          strategy='beforeInteractive' 
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

这样修改后，Next.js能正确识别脚本属于<head>区域，结合beforeInteractive策略处理加载逻辑，警告就会消失。

另外，如果你不需要脚本在交互前同步加载，也可以给<Script>添加async属性来规避警告，但这会改变脚本的执行时机，不推荐用于HubSpot表单这类需要提前加载的脚本。

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