Next.js/React.js项目集成Adsterra Banner页面空白问题求助

问题根源 #

你当前实现里的document.write是导致页面空白的核心原因。在Next.js的hydration流程或页面加载完成后调用document.write，会直接清空当前文档内容——这个API是为早期同步加载脚本设计的，完全不兼容React/Next.js的组件化渲染模型。另外，直接定义的atOptions可能不在全局作用域，Adsterra的invoke.js脚本会无法读取到配置。

修复方案 #

方案1：Next.js Script组件+全局变量+动态创建脚本 #

修改Script组件代码，把配置挂载到全局window对象，同时用动态创建script标签替代document.write：

import Script from 'next/script';

export default function BannerAd() {
  return (
    <Script id="adsterra-banner" strategy="afterInteractive">
      {`
        // 将配置挂载到全局window对象
        window.atOptions = {
          key: 'XXXXXX',
          format: 'iframe',
          height: 50,
          width: 320,
          params: {}
        };
        
        // 动态创建script标签并插入页面
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = \`\${location.protocol === 'https:' ? 'https' : 'http'}://www.effectivecreativeformat.com/66e709b141fa8aa6d66cfda7e0b098a6/invoke.js\`;
        document.body.appendChild(script);
      `}
    </Script>
  );
}

方案2：客户端组件useEffect（适配TS/JS项目） #

如果是Next.js 13+的App Router，建议创建客户端组件，用useEffect在组件挂载后加载广告脚本：

'use client';

import { useEffect } from 'react';

export default function AdsterraBanner() {
  useEffect(() => {
    // 避免重复加载脚本
    if (document.querySelector('#adsterra-invoke-script')) return;

    // 设置全局配置（TS项目需类型断言）
    (window as any).atOptions = {
      key: 'XXXXXX',
      format: 'iframe',
      height: 50,
      width: 320,
      params: {}
    };

    // 创建并插入脚本
    const script = document.createElement('script');
    script.id = 'adsterra-invoke-script';
    script.type = 'text/javascript';
    script.src = `${location.protocol === 'https:' ? 'https' : 'http'}://www.effectivecreativeformat.com/66e709b141fa8aa6d66cfda7e0b098a6/invoke.js`;
    document.body.appendChild(script);

    // 组件卸载时清理脚本和全局变量
    return () => {
      script.remove();
      delete (window as any).atOptions;
    };
  }, []);

  // 可选：给广告指定容器，方便样式控制
  return <div id="adsterra-banner-container"></div>;
}

额外注意事项 #

• 替换代码中的XXXXXX为你实际的Adsterra密钥。
• 若广告仍不显示，检查浏览器控制台是否有报错（比如CORS限制、脚本加载失败）。
• 上述方案均确保广告脚本仅在客户端执行，适配Next.js的SSG/SSR渲染模式。

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