错误：'metadata' 在客户端组件中不是有效的导出。请在服务器组件中使用 generateMetadata。
Error: 'metadata' is not a valid export in a Client Component. Use generateMetadata in a Server Component instead.
ID: nextjs/invalid-metadata-export-client-component
版本兼容性
| 版本 | 状态 | 引入 | 弃用 | 备注 |
|---|---|---|---|---|
| 13.4.0 | active | — | — | — |
| 13.5.0 | active | — | — | — |
| 14.0.0 | active | — | — | — |
| 14.1.0 | active | — | — | — |
| 15.0.0 | active | — | — | — |
根因分析
Next.js 应用路由器要求仅在服务器组件中通过 'metadata' 对象或 'generateMetadata' 函数定义元数据。客户端组件无法导出元数据，因为它们在浏览器中运行。
English
Next.js App Router requires metadata to be defined via the 'metadata' object or 'generateMetadata' function in Server Components only. Client Components cannot export metadata because they run on the browser.
官方文档
https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata解决方案
-
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 />; } -
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
100% 失败
The 'use client' directive marks the entire file as client-side. Any metadata export is still invalid regardless of wrapping.
-
Trying to import metadata from a server component into a client component
90% 失败
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.