nextjs config_error ai_generated true

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

Also available as: JSON · Markdown · 中文
95%Fix Rate
90%Confidence
1Evidence
2023-05-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
13.4.0 active — — —
13.5.0 active — — —
14.0.0 active — — —
14.1.0 active — — —
15.0.0 active — — —

Root Cause

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.

generic

中文

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

Official Documentation

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata

Workarounds

  1. 95% success 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 />; } 
    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. 90% success Use generateMetadata function in a Server Component wrapper that fetches data and passes it to a Client Component. 
    Use generateMetadata function in a Server Component wrapper that fetches data and passes it to a Client Component.

中文步骤

  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.

Dead Ends

Common approaches that don't work:

  1. Moving the metadata export inside a 'use client' component but wrapping it with a HOC 100% fail

    The 'use client' directive marks the entire file as client-side. Any metadata export is still invalid regardless of wrapping.

  2. Trying to import metadata from a server component into a client component 90% fail

    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.