Next.js中根据页面URL动态渲染脚本的域名判断问题

问题描述 #

在Next.js的app/page.tsx中尝试通过页面URL动态设置脚本的data-cbid属性，代码如下：

<Head>
  <script
    id="script"
    src="www.cookie.com"
    data-cbid={typeof window !== 'undefined' && window.location.href.includes('localhost') ?
    "XXXXXXXXX" : "YYYYYYYYYY"}
    data-blockingmode="auto"
    type="text/javascript"
    async>
  </script>
</Head>

但由于Next.js服务端渲染阶段无法获取window对象，条件判断始终返回YYYYYYYYYY，无法根据客户端域名动态切换。

解决办法 #

方法：使用客户端组件动态添加脚本 #

服务端无法获取客户端的window.location，必须在客户端环境执行脚本的创建和属性设置：

1. 创建一个客户端组件（添加'use client'指令），比如components/CookieScript.tsx：

'use client';

import { useEffect } from 'react';

export default function CookieScript() {
  useEffect(() => {
    // 避免重复添加脚本
    if (document.getElementById('script')) return;

    const script = document.createElement('script');
    script.id = 'script';
    script.src = 'https://www.cookie.com'; // 补全HTTP/HTTPS协议
    script.dataset.cbid = window.location.href.includes('localhost') ? 'XXXXXXXXX' : 'YYYYYYYYYY';
    script.dataset.blockingmode = 'auto';
    script.type = 'text/javascript';
    script.async = true;

    document.head.appendChild(script);

    // 组件卸载时清理脚本
    return () => script.remove();
  }, []);

  return null;
}

2. 在app/page.tsx中引入该组件：

import CookieScript from '@/components/CookieScript';

export default function Home() {
  return (
    <>
      {/* 页面其他内容 */}
      <CookieScript />
    </>
  );
}

原理说明 #

• 客户端组件仅在浏览器环境执行，此时可正常访问window.location，能准确判断当前域名。
• 通过useEffect在组件挂载时动态创建脚本，确保属性值基于客户端实际URL设置，避免服务端渲染时的判断错误。

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