为什么CodePen脚本无法在NextJS本地服务器中正常运行？

问题根源 #

你的代码有3个核心问题，直接导致脚本无法运行：

• 错误在页面组件中嵌套<html>、<body>标签。NextJS的Pages Router会自动生成全局html/body结构，自定义这些标签需要在_document.js中配置，直接写在页面组件里会造成DOM结构错乱、React水合失败，脚本依赖的DOM加载顺序完全混乱。
• 脚本加载顺序和策略配置错误。你本地的动画脚本强依赖前面引入的EasePack、rAF、TweenLite三个第三方库，但你没给这三个CDN脚本配置加载策略，NextJS默认会对无策略的Script组件做懒加载，大概率本地脚本执行时，依赖库还没加载完成，直接抛出未定义错误终止运行。另外beforeInteractive策略仅支持CDN资源和public目录下的根路径资源，你用相对路径引入本地脚本配这个策略会直接加载失败。
• 动画脚本执行时机不对。CodePen上的原生JS脚本默认是在DOM加载完成后立刻执行获取canvas元素、绑定事件，但React框架下页面组件需要完成客户端水合才会把DOM渲染到页面，脚本提前执行时拿不到#demo-canvas节点，直接终止运行。

修复步骤 #

1. 把页面组件里的<html>、<body>标签删掉，全局meta、字体这类公共配置移到_document.js中，页面组件只返回实际渲染的页面内容。
2. 调整脚本加载策略：三个依赖的CDN脚本全部配置strategy="beforeInteractive"，保证页面可交互前就按顺序加载完所有依赖；本地动画脚本改用strategy="afterInteractive"，等DOM和依赖都加载完成后再触发初始化。
3. 调整动画脚本的执行时机，不要让脚本在加载时立刻执行DOM查询逻辑，最好把动画初始化逻辑封装成函数，在脚本加载完成的回调、或者React的useEffect钩子中调用，确保DOM已经挂载、window对象可访问时再跑动画逻辑。

修复后的页面代码参考 #

import Head from 'next/head'
import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Head>
        <meta charSet="UTF-8"/>
        <title>CodePen - Animated Background</title>
        <link 
          href='https://fonts.googleapis.com/css?family=Raleway:200,400,800' 
          rel='stylesheet' 
          type='text/css'
        />
        <link 
          rel="stylesheet" 
          href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
        />
        <link 
          rel='stylesheet' 
          href='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/css/demo.css'
        />
        <link rel="stylesheet" href="../styles/dynamic.css"/>
      </Head>

      <div id="large-header" className="large-header">
        <canvas id="demo-canvas"></canvas>
        <h1 className="main-title">Vansh <span className="thin">Sharma</span></h1>
      </div>

      {/* 依赖库按顺序提前加载 */}
      <Script 
        src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js'
        strategy="beforeInteractive"
      />
      <Script 
        src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js'
        strategy="beforeInteractive"
      />
      <Script 
        src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js'
        strategy="beforeInteractive"
      />
      {/* 本地脚本加载完成后再初始化动画 */}
      <Script 
        src="../scripts/dynamic_script.js" 
        strategy="afterInteractive"
        onLoad={() => {
          // 如果你的动画脚本把初始化函数挂到了window上，这里直接调用即可
          if (typeof window.initAnimatedBg === 'function') {
            window.initAnimatedBg()
          }
        }}
      />
    </>
  )
}

排查提示 #

直接打开浏览器开发者工具的Console面板，就能看到具体报错：

• 报XXX is not defined就是依赖库没按顺序加载完成
• 报Cannot read properties of null (reading 'getContext')就是脚本执行时canvas节点还没挂载，调整执行时机即可

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