Skip to content
🎉MDX Conf — August 24th, 2020
MDX logo
v1.6.19

Next.js

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

npm install --save @next/mdx @mdx-js/loader

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

const withMDX = require('@next/mdx')()
module.exports = withMDX()

Treat .mdx files as pages

To have Next.js treat .mdx files in the pages directory as pages use the pageExtensions property:

// next.config.js
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'mdx'],
})

Use MDX for .md files

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

const withMDX = require('@next/mdx')({
extension: /\.mdx?$/
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'md', 'mdx']
})

Providing MDX Plugins

In next.config.js you can also provide MDX plugins from remark and rehype

const withMDX = require('@next/mdx')({
options: {
remarkPlugins: [],
rehypePlugins: []
}
})
module.exports = withMDX()

Typescript support

const withMDX = require('@next/mdx')({
extension: /\.mdx?$/
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
})
Edit this page on GitHub
Previous:
Getting Started
Next:
Gatsby