Next.js中导航栏滚动变色功能失效问题排查求助

大家好，我正在把项目从Vite + React迁移到Next.js，想在Navbar.jsx组件里实现滚动时改变导航栏颜色的功能，但目前这个逻辑在Next.js环境里失效了。先给大家看在Vite + React里能正常工作的代码，再对比我写的Next.js版本，麻烦帮忙看看哪里出问题了。

能正常工作的Vite + React版Navbar.jsx #

// 导航链接数组，后续会用.map渲染
const navigation = [ 
  {_id:101, title: 'HOME', href: '/'},
  {_id:102, title: 'ABOUT US', href: '/AboutUs'},
  {_id:103, title: 'SHOP', href: '/Shop'},
  {_id:104, title: 'MENU', href: '/Menu'},
  {_id:105, title: 'CONTACT US', href: '/ContactUs'},
];

const Navbar = () => {
    const { pathname } = useLocation();
    const active = useLocation().pathname; // 获取当前路径
    const [colour, setColour] = useState(false); // 控制导航栏颜色的状态
    const [cartOpen, setCartOpen] = useState(false) // 控制购物车开关

    const close = () => setCartOpen(false);
    const open = () => setCartOpen(true)

    useEffect(() => {
      close();

      const changeColour = () => {
        const isHome = matchPath("/", pathname)
        const isAboutUs = matchPath("/AboutUs", pathname)
        // 省略其他页面路径的判断逻辑...

        if (isHome && window.scrollY >= 650) {
            setColour(true)
        } else if (isAboutUs && window.scrollY >= 1) {
            setColour(true)
        } 
        // 省略其他页面的判断逻辑...
      }; 
      
      // 组件挂载时先执行一次，处理页面初始就处于滚动状态的情况
      changeColour();
      window.addEventListener('scroll', changeColour);

      return () => {
        window.removeEventListener('scroll', changeColour)
      }
    }, [pathname])

return (
  <div className={`${colour ? 'navbar navbarbg' : 'navbar'}`}>
    {/* 省略组件内部其他渲染逻辑 */}
  </div>
)
}

失效的Next.js版Navbar.jsx #

const navigation = [ 
  { _id:101, title: 'HOME', href: '/' },
  { _id:102, title: 'ABOUT US', href: '/about' },
  { _id:103, title: 'SHOP', href: '/shop' },
  { _id:104, title: 'MENU', href: '/menu' },
  { _id:105, title: 'CONTACT US', href: '/contact' },
];

const Navbar = () => {
  const { pathname } = usePathname();
  const [colourOnScroll, setColourOnScroll] = useState(false); // 控制导航栏颜色的状态
  const [cartOpen, setCartOpen] = useState(false) // 控制购物车开关

  const close = () => setCartOpen(false);
  const open = () => setCartOpen(true)

  // 滚动变色逻辑
  const changeColourOnScroll = () => {
    const scrollThresholds = {
      '/': 650,
      '/about': 1,
      // 省略其他页面的滚动阈值配置...
    };

    const threshold = scrollThresholds[pathname] || 0;
    if (window.scrollY >= threshold) {
      setColourOnScroll(true)
    } else {
      setColourOnScroll(false)
    }
  }

  useEffect(() => {
    close();    
    const handleScroll = () => {
      changeColourOnScroll();
    }
    changeColourOnScroll(); // 组件挂载时执行一次，处理初始滚动状态

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [pathname])
    
  return (
    <div className={`${colourOnScroll ? 'navbar navbarbg' : 'navbar'}`}>
     {/* 省略组件内部其他渲染逻辑 */}
    </div>
  )
}

我已经确认替换了路由相关的API：从React Router的useLocation换成了Next.js的usePathname（也正确从'next/navigation'导入了），但滚动时导航栏还是不会变色。有没有大佬能帮我排查下哪里写错了？

备注：内容来源于stack exchange，提问作者ryanl