Frontmatterjs – Nextra

Accesing frontmatter in MDX

This is an example of how to show the contents of a frontmatter using JavaScript in a MDX file. Notice how the preamble is written in JS by adding the suffix js to the triple dash --- separator.

This is the whole file:

---js
{
 a : 1+3,
 b : 2
}
---
import { frontmatter} from '@/src/frontmatter'
 
{ JSON.stringify(frontmatter()) }
 
This is content

{"a":4,"b":2}

This is content

The code in src/frontmatter.js (opens in a new tab) is:

import { Link } from 'nextra-theme-docs'
import { useConfig } from 'nextra-theme-docs'
 
const frontmatter = () => {
    return useConfig().frontMatter
}
 
export { Link, frontmatter };

frontmatter Functional Components Life Cycle and useEffect