Next.js App Router多路由报错及metadata冲突问题求助

错误1：Server Component 中使用 useRouter #

原因：App Router 下的 layout.tsx 默认是 Server Component，next/router 是 Pages Router 的专属路由工具，Server Component 不支持导入它，必须改用 App Router 配套的 next/navigation。但直接替换仍有问题——useNavigation 是客户端钩子，无法在 Server Component 中直接调用。

错误2：useNavigation 不是函数 #

原因：useNavigation 属于客户端专属钩子，必须在标记了 'use client' 的组件内使用。未标记的组件默认是 Server Component，在服务器环境下找不到该钩子的实现，因此报错。

错误3：客户端组件导出 metadata #

原因：metadata 是 Next.js 用于服务器端渲染元数据的配置项，只能在 Server Component 中导出。标记了 'use client' 的组件属于客户端执行范畴，不允许导出这类服务器端配置。

最终解决方案：拆分组件，分离客户端逻辑与服务器端配置 #

把需要使用路由钩子的逻辑（比如根据路径隐藏头部）拆成独立的客户端组件，layout.tsx 保持为 Server Component，负责导出 metadata 并渲染这个客户端组件。

1. 创建客户端组件（示例：HeaderController.tsx）

// app/components/HeaderController.tsx
'use client';

import { usePathname } from 'next/navigation';
import MainHeader from '../layout/main-header';

export default function HeaderController() {
  const pathname = usePathname();
  const excludeHeader = pathname.startsWith('/admin');

  return excludeHeader ? null : <MainHeader />;
}

这里用 usePathname 替代 useNavigation 获取路径，更贴合“仅判断路径”的需求，逻辑更简洁。

2. 修改 layout.tsx，保留 Server Component 属性并导出 metadata

// app/layout.tsx
import { Inter } from 'next/font/google';
import HeaderController from './components/HeaderController';

const inter = Inter({ subsets: ['latin'] });

// 元数据导出保留在 Server Component 中
export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {/* 引入客户端组件处理路由相关逻辑 */}
        <HeaderController />
        {children}
      </body>
    </html>
  );
}

关键注意点 #

• Server Component 禁止使用客户端钩子（如 useNavigation、usePathname），这类交互逻辑必须封装到标记 'use client' 的组件中。
• metadata、generateMetadata 等元数据相关导出，必须放在 Server Component 内，客户端组件不支持这类导出。
• App Router 中，单纯获取当前路径优先用 usePathname，比 useNavigation 更轻便。

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