Layout.tsx非客户端组件却被NextJS判定为客户端组件，无法导出Metadata

问题原因 #

Next.js App Router中，RootLayout默认是服务器组件，不能包含客户端特有的API（如React Hooks）。你的Nav组件使用了React Hooks，且未标记为客户端组件，导致RootLayout被自动转为客户端组件，而客户端组件不支持导出Metadata，因此触发报错。

解决方案 #

1. 标记Nav为客户端组件
   在Nav组件的源代码顶部添加'use client'指令（必须是文件第一行，注释除外），明确将其声明为客户端组件：

'use client';

// 你的Nav组件代码，比如使用useState、useEffect等Hooks
import { useState } from 'react';

export default function Nav() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  // 其他组件逻辑...
}

2. 重新构建并启动服务器
   执行以下命令清理缓存并重启开发服务器：

# 删除.next缓存文件夹
rm -rf .next
# 重启开发服务器
npm run dev

这样RootLayout会保持服务器组件身份，既能正常引入客户端组件Nav，也能正确导出Metadata。

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