Next.js App Router服务端组件如何根据当前路径修改部分布局？

要实现布局中导航栏的当前页高亮，必须将导航组件设置为客户端组件——因为usePathname是Next.js专为客户端设计的路由钩子，只能在客户端组件环境下使用，服务器组件无法调用它。

具体实现步骤：

• 给导航组件添加客户端标记：在组件顶部写入'use client';指令。
• 导入并使用usePathname钩子，获取当前页面的路径。
• 对比当前路径与导航项的路径，给匹配的导航项添加高亮样式。

示例代码：

'use client';

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

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

  // 导航项配置
  const navLinks = [
    { label: '首页', path: '/' },
    { label: '博客', path: '/blog' },
    { label: '关于我', path: '/about' },
  ];

  return (
    <nav className="flex gap-6 p-4 bg-gray-100">
      {navLinks.map(link => (
        <Link
          key={link.path}
          href={link.path}
          className={`${currentPath === link.path ? 'text-blue-600 font-bold border-b-2 border-blue-600' : 'text-gray-700 hover:text-gray-900'}`}
        >
          {link.label}
        </Link>
      ))}
    </nav>
  );
}

额外说明：如果你的布局本身是服务器组件，完全不需要改动——只需要把导航这个子组件单独设为客户端组件即可。这样既保留了布局的服务器渲染优势，又能实现客户端侧的路径检测和高亮效果。

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