{
  "id": "nextjs/invalid-metadata-export-client-component",
  "signature": "Error: 'metadata' is not a valid export in a Client Component. Use generateMetadata in a Server Component instead.",
  "signature_zh": "错误：'metadata' 在客户端组件中不是有效的导出。请在服务器组件中使用 generateMetadata。",
  "regex": "metadata.*is not a valid export in a Client Component",
  "domain": "nextjs",
  "category": "config_error",
  "subcategory": null,
  "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.",
  "root_cause_type": "generic",
  "root_cause_zh": "Next.js 应用路由器要求仅在服务器组件中通过 'metadata' 对象或 'generateMetadata' 函数定义元数据。客户端组件无法导出元数据，因为它们在浏览器中运行。",
  "versions": [
    {
      "version": "13.4.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "13.5.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "14.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "14.1.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "15.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "Moving the metadata export inside a 'use client' component but wrapping it with a HOC",
      "why_fails": "The 'use client' directive marks the entire file as client-side. Any metadata export is still invalid regardless of wrapping.",
      "fail_rate": 1.0,
      "condition": "",
      "sources": []
    },
    {
      "action": "Trying to import metadata from a server component into a client component",
      "why_fails": "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.",
      "fail_rate": 0.9,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "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 />; }",
      "success_rate": 0.95,
      "how": "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 />; }",
      "condition": "",
      "sources": []
    },
    {
      "action": "Use generateMetadata function in a Server Component wrapper that fetches data and passes it to a Client Component.",
      "success_rate": 0.9,
      "how": "Use generateMetadata function in a Server Component wrapper that fetches data and passes it to a Client Component.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "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."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.9,
  "fix_success_rate": 0.95,
  "resolvable": "true",
  "first_seen": "2023-05-01",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}