Next.js如何在使用SSR时搭配'use client'全局导航栏？

不用给根layout加'use client'，也不用每个页面重复写导航栏，最优方案是把导航栏单独拆成客户端组件，根layout保持服务端组件身份，这样既实现全局复用，又不影响其他组件的SSR能力。

具体步骤： #

1. 创建独立的客户端导航栏组件
   新建一个带'use client'标记的组件，把导航栏的交互逻辑（比如useState、usePathname）都放在这里：

   // app/components/ClientNavbar.tsx
   'use client';
   
   import { useState } from 'react';
   import Link from 'next/link';
   import { usePathname } from 'next/navigation';
   
   export default function ClientNavbar() {
     const currentPath = usePathname();
     // 用useState管理选中状态，也可以直接用currentPath判断（更贴合路由实际）
     const [activeTab, setActiveTab] = useState(currentPath);
   
     // 定义导航标签列表
     const navTabs = [
       { label: '首页', path: '/' },
       { label: '搜索', path: '/search' },
       { label: '我的', path: '/profile' },
       // 其他标签...
     ];
   
     return (
       <nav className="navbar">
         {navTabs.map(tab => (
           <Link
             key={tab.path}
             href={tab.path}
             onClick={() => setActiveTab(tab.path)}
             className={`nav-item ${activeTab === tab.path ? 'active' : ''}`}
           >
             {tab.label}
           </Link>
         ))}
       </nav>
     );
   }
   

2. 在根layout中导入该组件
   根layout不需要加'use client'，直接导入上面的客户端组件即可：

   // app/layout.tsx
   import ClientNavbar from './components/ClientNavbar';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="zh-CN">
         <body>
           <ClientNavbar />
           <main>{children}</main>
         </body>
       </html>
     );
   }
   

为什么这个方案可行？ #

Next.js App Router的规则是：服务端组件可以安全地导入客户端组件，只有客户端组件本身需要'use client'标记。这样根layout依然是服务端组件，它的所有子组件（页面、其他布局）默认还是服务端组件，完全保留SSR能力，同时导航栏的交互逻辑也能正常运行。

额外优化建议 #

如果你的导航选中状态只需要和当前路由保持一致，可以去掉useState，直接用usePathname返回的路径判断选中状态，这样能避免状态和路由不一致的问题，代码更简洁：

// 去掉useState，直接用currentPath
const currentPath = usePathname();

// 渲染时直接判断
className={`nav-item ${currentPath === tab.path ? 'active' : ''}`}

为什么不推荐每个页面单独加导航栏？ #

这种方式会产生大量重复代码，后续修改导航栏的结构、标签或样式时，需要逐个页面更新，维护成本极高，完全违背了代码复用的原则，绝对不是最优方案。

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