Next.js 14.1.0中beforeInteractive策略无法加载本地脚本

你的操作有误，并非Next.js的bug。核心问题在于beforeInteractive策略的脚本放置位置不符合框架要求：

• beforeInteractive类型的脚本必须直接作为<html>标签的子元素，不能嵌套在<body>标签内部。Next.js会自动将这类脚本注入到最终HTML的<head>中，确保在React应用初始化前执行。

正确的RootLayout写法 #

<html lang={locale}>
  {/* beforeInteractive 脚本需放在 html 标签下、body 标签外 */}
  <Script
    id="config-variables"
    strategy="beforeInteractive"
    src="/scripts/config.js"
  />
  <body
    className={cn(
      "min-h-screen bg-background font-primary text-primary antialiased",
    )}
  >
    {children}
  </body>
</html>

验证步骤 #

1. 修改位置后，查看页面最终渲染的HTML源代码，确认脚本是否出现在<head>标签内
2. 在客户端组件的初始化逻辑（比如useEffect）中打印window.REACT_APP_DEPLOY_ENV，验证变量是否已被正确设置

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