Reference Frontmatter in React MDX Markdown File

Question

I have set up a next.js markdown blog using mdx: https://mdxjs.com/.

I would like to be able to reference data in the frontmatter section within the mdx file itself. Something like this:

// my-file.mdx
---
title: "My blog post title"

# {title} // should be replaced by the frontmatter title

Now, this does not work. It does NOT replace {title} with the title found in the frontmatter (i.e,. My blog post title). What I am wondering is whether or not there is a way to do this and, if so, how?

Thanks.

user_19155340 · Answer

Check out the Docusaurus docs page on available exports. For your example, title is available as

{contentTitle}

. For more specific keys, you can use something like:

{Object.entries(frontMatter).find(frontmatter => frontmatter[0] === 'description'}

to retrieve, in this example, the description. (Replace html

tag with whatever tag is appropriate.)

Reference Frontmatter in React MDX Markdown File

1 Answers