Hey there , I'm trying to use generateMetdata as async function to set dynamic metadata on a dynamic route for which the page.tsx is a server component & hence doesn't use the use client directive on top but then also I get this error :

 ⨯ ./src/app/watch/[type]/[id]/page.tsx
Error:
  × You are attempting to export "generateMetadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://
  │ nextjs.org/docs/getting-started/react-essentials#the-use-client-directive
  │
  │
    ╭─[D:\projects\netflix-clone\src\app\watch\[type]\[id]\page.tsx:19:1]
 19 │   id: string;
 20 │ }
 21 │
 22 │ export async function generateMetadata(): Promise<Metadata> {
    ·                       ────────────────
 23 │   return {
 24 │     title: "custom metadata title !",
 24 │   };
    ╰────

Import trace for requested module:
./src/app/watch/[type]/[id]/page.tsx
./src/components/Carousel.tsx

I tried using the same code in the root page.tsx it worked fine there.