nextjs app-router ai_generated true

Error: You are attempting to export 'metadata' from a component marked with 'use client'

ID: nextjs/metadata-not-supported-client

Also available as: JSON · Markdown
97%Fix Rate
98%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

Next.js metadata export (for SEO) is only supported in Server Components, not Client Components.

generic

Workarounds

  1. 97% success Export metadata from a Server Component (layout.tsx or page.tsx without 'use client') 
    Keep metadata in the page/layout, keep interactive parts in child Client Components

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

  2. 92% success Use generateMetadata() function for dynamic metadata based on params 
    export async function generateMetadata({ params }) { return { title: ... } }

Dead Ends

Common approaches that don't work:

  1. Using document.title in useEffect instead 70% fail

    Loses SEO benefits; meta tags aren't set during SSR

  2. Removing 'use client' from the page 55% fail

    May break if the component uses hooks or browser APIs

Error Chain

Frequently confused with: