You are attempting to export "metadata" from a component marked with "use client" Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Next.js: You are attempting to export "metadata" from a component marked with "use client", which is disallowed

metadata/generateMetadata can only be exported from Server Components.

Exact message you may see You are attempting to export "metadata" from a component marked with "use client", which is disallowedYou are attempting to export "generateMetadata" from a component marked with "use client"Either remove the export, or the "use client" directivemetadata export use client disallowed
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Remove "use client" from the page/layout that exports metadata, or move the interactive part into a separate Client Component and keep the page server-side. Metadata is evaluated on the server.

Common causes

  • "use client" at the top of page.tsx that exports metadata
  • Layout marked client but exporting metadata
  • Mixed server/client concerns in one file
  • Copy of a client component turned into a page
  • Re-export from a client module

⚡ Quick fix

  1. Make the page a Server Component and import a Client Component for interactivity
  2. Keep export const metadata = {...} in the server file
  3. Use useEffect(() => { document.title = ... }) only for purely client pages

Detailed fix by platform

Next.js

  1. tsx
    // page.tsx (server)
export const metadata = { title: "Home" };
export default function Page() { return <ClientPart />; }

How to diagnose

  1. Directive — "use client" on this file?
  2. Metadata — Where exported?
  3. Split — Server page + client child?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

createContext only works in Client Components — Next.js: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client" (Next.js)createContext only wo…needs useState — You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client" (React)needs useStatenext build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScrip…No HTTP methods exported in route.ts — Next.js: Error: No HTTP methods exported in '/app/api/users/route.ts'. Export a named export for each HTTP method (GET, POST...) (Next.js)No HTTP methods expor…server-only — Next.js: You're importing a component that needs "server-only". That only works in a Server Component (Next.js)server-onlyYou have a Server Component that imports next/router. Use next/navigation instead — Next.js: You have a Server Component that imports next/router. Use next/navigation instead (Next.js)You have a Server Com…You are a…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.