# 错误：'metadata' 在客户端组件中不是有效的导出。请在服务器组件中使用 generateMetadata。

- **ID:** `nextjs/invalid-metadata-export-client-component`
- **领域:** nextjs
- **类别:** config_error
- **验证级别:** ai_generated
- **修复率:** 95%

## 根因

Next.js 应用路由器要求仅在服务器组件中通过 'metadata' 对象或 'generateMetadata' 函数定义元数据。客户端组件无法导出元数据，因为它们在浏览器中运行。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| 13.4.0 | active | — | — |
| 13.5.0 | active | — | — |
| 14.0.0 | active | — | — |
| 14.1.0 | active | — | — |
| 15.0.0 | active | — | — |

## 解决方案

1. ```
   Remove the 'use client' directive from the page/layout file. If you need client-side interactivity, split the file: keep the metadata export in the server component and move interactive parts to a separate client child component. Example: // page.tsx (Server Component) export const metadata = { title: 'My Page' }; export default function Page() { return <ClientComponent />; }
   ```
2. ```
   Use generateMetadata function in a Server Component wrapper that fetches data and passes it to a Client Component.
   ```

## 无效尝试

- **Moving the metadata export inside a 'use client' component but wrapping it with a HOC** — The 'use client' directive marks the entire file as client-side. Any metadata export is still invalid regardless of wrapping. (100% 失败率)
- **Trying to import metadata from a server component into a client component** — Metadata is a static export that must be defined in the page/layout file itself; importing it doesn't work because the client component cannot re-export it. (90% 失败率)