How to get frontmatter in v4 (client or server)

[Firgrep]

Is your feature request related to a problem? Please describe.
useConfig() handily exposed frontMatter, which allowed making components with conditions based on certain mdx file metadata.

Describe the solution you'd like
A similar hook or function. I'm not sure if a replacement already exists but I can't find it.

[dimaMachina]

Hi, where do you want to access frontmatter in mdx page or custom jsx component imported in mdx page?

[Firgrep]

Custom JSX component that sits with the layout, just beneath the children, and renders its contents based on certain conditions from the frontmatter of the mdx page currently in view. E.g.

I got this working in v3 making a wrapper component for main property in the old theme config, and inside the wrapper I had a component after the children that got the frontMatter from the old hook and rendered on certain conditions, something like:

[dimaMachina]

I think similar we return activeThemeContext

nextra/packages/nextra-theme-docs/src/stores/config.tsx

Line 79 in d5cb1bc

const { activeThemeContext } = store.getState().normalizePagesResult

In the same way, we can return activeMetadata

[Firgrep]

Yeah, that'd be amazing!

[dimaMachina]

Hi @Firgrep, I am finishing the Blogpost announcement for Nextra 4 RC.0 with all features and migration guide, so busy for now to add it

I am planning to add this feat in Nextra 4 RC.1

For now, you can access frontMatter (in your client component) via:

const { normalizePagesResult } = useConfig()
console.log(normalizePagesResult.activePath.at(-1).frontMatter)

Hope this unblock you for this moment ;)

[Firgrep]

Hi @dimaMachina , thanks for the hotfix! ;) Really appreciate it!

By the way, I've opened a new issue with regards to the bug, as I found another one and they seemed related. Ref #3567