Next.js集成Disqus遇问题：Next Link与Next Script致组件加载异常

问题场景 #

在Next.js项目中集成Disqus评论系统，使用Next.js的Link组件做客户端导航，初始加载时评论正常显示，但通过Link跳转到其他页面再返回后，Disqus模块消失，只有硬刷新浏览器才能恢复，控制台无任何报错信息。

问题根源 #

Next.js的Link组件采用客户端路由，页面切换时不会重新加载整个文档，Disqus的初始化脚本仅在首次页面加载时执行一次；当路由切换返回时，Disqus无法自动检测到页面URL/标识符的变化，也不会重新渲染评论区。另外使用Next.js的Script组件时，脚本可能不会在客户端路由切换时重新执行，导致Disqus无法重新初始化。

修复方案 #

将Disqus组件改为客户端组件，监听路由变化事件，在路由切换完成后重新初始化Disqus，同时处理已存在的Disqus实例避免重复加载。

修改后的代码 #

'use client';
import React, { useEffect } from "react";
import { useRouter } from "next/navigation";

const DisqusComments = () => {
  const router = useRouter();

  // 初始化/重置Disqus的核心函数
  const initDisqus = () => {
    // 如果Disqus实例已存在，用reset方法刷新评论
    if (window.DISQUS) {
      window.DISQUS.reset({
        reload: true,
        config: function () {
          this.page.url = window.location.href;
          this.page.identifier = window.location.href.split(".online")[1];
        }
      });
    } else {
      // 首次加载时初始化Disqus
      var disqus_config = function () {
        this.page.url = window.location.href;
        this.page.identifier = window.location.href.split(".online")[1];
      };
      (function() {
        const d = document, s = d.createElement('script');
        s.src = 'https://yoururlhere.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
      })();
    }
  };

  // 监听路由变化，每次切换完成后重新初始化Disqus
  useEffect(() => {
    // 组件挂载时初始化一次
    initDisqus();

    const handleRouteChange = () => initDisqus();
    // 绑定路由切换完成事件
    router.events.on('routeChangeComplete', handleRouteChange);

    // 组件卸载时移除事件监听
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router]);

  return (
    <>
      <div id="disqus_thread"></div>
      <noscript>请启用JavaScript以查看由Disqus提供的评论。</noscript>
    </>
  );
};

export default DisqusComments;

关键修改说明 #

• 添加'use client'指令：将组件标记为客户端组件，确保能使用useRouter和浏览器全局对象（如window）
• 移除Next.js的Script组件：改为在useEffect中手动初始化脚本，更灵活地控制执行时机
• 路由监听：通过router.events.on('routeChangeComplete')监听客户端路由切换，每次切换完成后触发Disqus初始化
• 处理已存在的Disqus实例：使用window.DISQUS.reset()方法刷新评论，避免重复加载脚本导致的冲突

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