Why MDX

MDX is the format we actually write pages and posts with. It's a combination of markdown, a markup language for writing prose, and JSX a syntax for describing react component trees in Javscript.

These combine to provide a really rich environment for writing webpages.

Markdown let's you fairly naturally use the standard elements of a page, headers, emphasis, quotes, code, etc, and JSX let's you drop in rich components with logic you can code up in javascript.

Metadata

MDX let's you export metadata as well, and easily wrap different pages in different top level components. If you look at the top of the file this page is generated from you'll see this:

import {Layout} from '../../components/Layout.js'

export const meta = {
  title: "Why MDX",
  date: '2019-04-20',
  filename: 'why-mdx'
}

export default ({children}) => <Layout title={meta.title}>{children}</Layout>

This block is first importing the (Layout component)[https://gitlab.com/jaredpereira/next-mdx-blog/blob/master/components/Layout.js]. Then it defines variable called meta that it exports. When we're parsing through the blog posts (which we do in the (BlogList)[https://gitlab.com/jaredpereira/next-mdx-blog/blob/master/components/BlogList.js] component) we use this data to generate the rendered list.

Conclusion

Pros

• Let's you easily write prose and include rich components
• Uses known syntaxes (markdown and JSX)
• Works with the rehype/remark ecosystem for plugins

Cons

• Some syntax quirks
• Unpleasant errors on syntax errors in JSON blocks

If you disagree with any of the position here or have some more thoughts, open up an issue and let's discuss!