Next.js全局导航栏实现：解决当前页高亮时window未定义错误

你遇到的window is not defined错误确实是因为Next.js的服务端渲染（SSR）机制：服务端渲染时没有浏览器环境的window对象，直接访问会报错。下面针对不同的Next.js路由方案给出正确的实现方式：

Pages Router（Next.js 12及更早版本） #

使用Next.js提供的useRouter钩子获取当前路由信息，无需直接操作window：

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function Navbar() {
  const router = useRouter();

  return (
    <nav>
      <Link
        href="/about"
        className={`${router.pathname === '/about' ? 'text-red-500 cursor-default' : 'link-underline'} mx-2`}
      >
        About
      </Link>
      {/* 其他导航链接同理 */}
    </nav>
  );
}

router.pathname会返回当前页面的路径（比如/about），直接用它判断即可高亮对应链接。

App Router（Next.js 13+） #

App Router默认使用服务端组件，需要先声明组件为客户端组件，再使用usePathname钩子：

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function Navbar() {
  const pathname = usePathname();

  return (
    <nav>
      <Link
        href="/about"
        className={`${pathname === '/about' ? 'text-red-500 cursor-default' : 'link-underline'} mx-2`}
      >
        About
      </Link>
      {/* 其他导航链接同理 */}
    </nav>
  );
}

• 'use client'指令必须放在组件最顶部，标记该组件为客户端组件，才能使用usePathname这类客户端钩子。
• usePathname会返回当前页面的路径，用法和Pages Router里的router.pathname一致。

额外说明 #

如果你的导航包含动态路由（比如/posts/[id]），可以结合router.asPath（Pages Router）或直接匹配路径前缀来处理，比如判断pathname.startsWith('/posts')来高亮整个分类的导航链接。

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