Now that you know about the benefits of Markdown and MDX, let's set it up in our Gatsby project.
First, install MDX and the corresponding Gatsby plugin:
npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
Since we've added a plugin, we'll need to add it to our plugins array in gatsby-config.js:
plugins: [
`gatsby-plugin-mdx`,
`gatsby-plugin-styled-components`
]
Out of the box, we can just add a page to our /pages folder with the extension .mdx and it will just magically work. If we add thingstodo.mdx with some Markdown and run gatsby develop, we can navigate to /thingstodo and see the result.
This is pretty neat, but it'd be better if we could use a custom layout with these pages. Let's do that in the next video.