Using MDX in Next.js

Today I learned that next-mdx-remote makes it incredibly easy to load markdown files with frontmatter and render them safely in a Next.js Pages router application.

You simply use serialize in getStaticProps, and pass the serialized source to the <MDXRemote /> component in your page!

import { MDXRemote } from 'next-mdx-remote'

export default function Page({ source }) {
  return <MDXRemote {...source} />
}