Today I Learned.

A collection of short notes, interesting code snippets, and random things I learn day-to-day.

Using MDX in Next.js

How to serialize and render MDX

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} />
}