error

[drifting pulsar]

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive.

[simple pebble]

Hi @drifting pulsar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error message you're seeing is due to the fact that Next.js does not allow exporting "metadata" from a component marked with "use client". This is because "metadata" is not supposed to be exported from client components, it's only allowed to be used in server components for now.

Here's a workaround you can try:

1. Create a client component, say, page.client.tsx with all your logic:

"use client";

export default function PageClient() {
  return <div>Hello, world!</div>;
}

2. Then use it in the server component page.tsx:

// page.tsx
import PageClient from "./page.client";

export default function Page() {
  return <PageClient />;
}

export const metadata = {
  title: "Hello, world!",
};

This way, you're separating the client and server components, and you can still export metadata from the server component.

For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/building-your-application/optimizing/metadata).

Sources:

• Github Issue 50217 (https://github.com/vercel/next.js/issues/50217)
• Github Issue 48266 (https://github.com/vercel/next.js/issues/48266)
• Github Issue 44389 (https://github.com/vercel/next.js/issues/44389)
• Github Issue 50428 (https://github.com/vercel/next.js/issues/50428)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: