Next.js provides an official plugin to simplify MDX importing into your project.

npm install --save-dev @zeit/next-mdx

To configure MDX, add the following to your next.config.js:

const withMDX = require('@zeit/next-mdx')()

module.exports = withMDX()

Use MDX for .md files

The Next.js MDX plugin allows for you to also use MDX parsing for .md files:

const withMDX = require('@zeit/next-mdx')({
  extension: /.mdx?$/

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx']