Gatsby

To use MDX with Gatsby, use gatsby-plugin-mdx.

First, scaffold a new Gatsby 2.0 or greater site and install the gatsby-plugin-mdx plugin.

gatsby new gatsby-site
cd gatsby-site
yarn add gatsby-plugin-mdx @mdx-js/mdx@latest @mdx-js/react@latest

Then add gatsby-plugin-mdx to your gatsby-config.js in the plugins section.

module.exports = {
  siteMetadata: {
    title: `My Ambitious Project`
  },
  plugins: [`gatsby-plugin-mdx`]
}

Finally, add an .mdx file in the src/pages directory. It “Just Works”.

# My first MDX Page
some awesome content

For more documentation on programmatically creating pages with Gatsby, see the Gatsby MDX docs.