I'm checking this document to add either static or dynamic metadata to my page. When I run the page in localhost I can't see the metadata in the head. If I add it directly using <meta>everything works as intended.

The sample code when trying to use it directly in index.js is:

    import Layout from "@/components/layout"

    export const metadata = {
      title: "Create Next App",
      description: "Generated by create next app",
    }

    export default function Home() {
      return (
        <Layout>
          <div>This is an example</div>
        </Layout>
      )
    }

Another issue I noticed is that if I tried to add the metadata in the layout.js file then I get the following error even though I'm not using the "use client" directive.

ou are attempting to export "metadata" 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

This is the layout.js code:

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
}

export default function Layout({ children }) {
  return (
    <div>
      <p>This is a layout</p>
      {children}
    </div>
  )
}

The documentation also mentions the following:

Config-based Metadata: Export a static metadata object or a dynamic generateMetadata
function in a layout.js or page.js file.

What constitutes a layout file? Is it any file called layout.js? Is it dependant on its parent directory same as pages?

You can find a sample of the project here