How to parse Frontmatter data in a Next MDX Blog

Frontmatter is used to specify metadata in markdown files. In this article, I will show you how to parse this metadata while rendering the MDX content.

page.mdx

---
title: This is frontmatter
---

# Frontmatter example

Installation

We will be using two libraries for this, remark-frontmatter and remark-mdx-frontmatter.

npm i remark-frontmatter remark-mdx-frontmatter

Usage

I use multiple remark plugins in my application. This is how I apply them in next.config.mjs.

next.config.mjs

import nextMDX from '@next/mdx'

import { recmaPlugins } from './src/mdx/recma.mjs'
import { rehypePlugins } from './src/mdx/rehype.mjs'
import { remarkPlugins } from './src/mdx/remark.mjs'

const withMDX = nextMDX({
  options: {
    remarkPlugins,
    rehypePlugins,
    recmaPlugins,
  },
})

In remark.mjs, I enable the plugins by adding them to the exported array.

remark.mjs

import { mdxAnnotations } from 'mdx-annotations'
import remarkFrontmatter from 'remark-frontmatter'
import remarkGfm from 'remark-gfm'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'

export const remarkPlugins = [
  mdxAnnotations.remark,
  remarkGfm,
  remarkFrontmatter,
  remarkMdxFrontmatter,
]