Enable frontmatter in MDX

Enable frontmatter in MDX

By default mdx doesn't support frontmatter content in your mdx documents. To enable it, you need to add remark-mdx-frontmatter plugin.

Install

npm install remark-frontmatter remark-mdx-frontmatter --save-dev

Add plugin in next.config.mjs

import createMDX from '@next/mdx';

import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'


const nextConfig = {}

    // Configure pageExtensions to also include *.mdx
    nextConfig.pageExtensions = ['jsx', 'mdx', 'ts', 'tsx']; 


const withMDX = createMDX({
    extension: /\.mdx?$/,
    options: {
        // If you use remark-gfm, you'll need to use next.config.mjs
        // as the package is ESM only
        // https://github.com/remarkjs/remark-gfm#install
        remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
        // If you use `MDXProvider`, uncomment the following line.
        // providerImportSource: "@mdx-js/react",
    },
})


// *** END: Export
// Merge MDX config with Next.js config
export default withMDX(nextConfig)