Get frontmatter in server component/client component not in Layout?

[sergi0g]

Hello!

I'm trying to migrate my Nextra docs site to v4. I had a custom head element which would get the frontmatter from useConfig() and generate OpenGraph meta tags. From what I've understood, there is no way to get the frontmatter of the current page in a server component. If I make my Head a client component, I have to place it inside Layout because it provides the config context. However that is impossible.

My Head component should ideally look like this:

"use client";

import { useConfig } from "nextra-theme-docs";
import { Head as NextraHead } from "nextra/components";

export function Head() {
  const config = useConfig().normalizePagesResult.activeMetadata!;
  const title = `${config.title} – MyCompany`;
  const description = config.description || "Hello world";
  const image = config.image || "https://mycompany.com/images/og.png";
  return (
    <NextraHead>
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="/favicon-32x32.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href="/favicon-16x16.png"
      />
      <link rel="manifest" href="/site.webmanifest" />
      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
      <meta name="msapplication-TileColor" content="#da532c" />
      <title>{title}</title>
      <meta property="og:title" content={title} />
      <meta name="description" content={description} />
      <meta property="og:description" content={description} />
      <meta name="og:image" content={image} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="https://mycompany.com" />
      <meta name="apple-mobile-web-app-title" content="MyCompany" />
    </NextraHead>
  );
}

Even if I don't include the meta tags that rely on frontmatter and manually append the – MyCompany suffix to every page title, but change it for the sidebar, etc., twitter can't generate a preview for my site, because it can't find a valid title or description.

Am I missing something in the docs? The only other possible solution I see would be creating a custom theme, but I'm using Nextra because it has a nice docs theme and should work well out of the box. Any ideas?

[pan93412]

We are also experiencing this issue! Is there a workaround for this, aside from pre-generating the og-image URL for every MDX file?