Using MDX for writing content

Leverage MDX to write content with React components in Next.js.

1 min read
Markdown
MDX
Next.js
Content Layer

MDX is a file format that lets you write JSX in your Markdown files. You can import components, such as interactive charts or alerts, and embed them within your content.

In Next.js we can use Content Layer to easily integrate MDX into our site.

One of the major benefits of using MDX is that we can write React components in our markdown files. This makes it easy to create complex blog posts with interactive components. We can also use MDX to create documentation for our projects.

The downsides of using MDX is that it is quite tricky to setup. We are also limited when we want to integrate CMS into our site. We can't use Content Layer with CMS like Contentful or Prismic — I don't think they support it.

However using CMS is not really important for me right now, as I mostly use VSCode to write my blog posts. I think MDX is a solid tool for writing engineering content in React and Next.js.