npm install --save @zeit/next-mdx @mdx-js/mdx
or
yarn add @zeit/next-mdx @mdx-js/mdx
Create a next.config.js
in your project
// next.config.js
const withMDX = require('@zeit/next-mdx')()
module.exports = withMDX()
Optionally you can provide MDX options:
// next.config.js
const withMDX = require('@zeit/next-mdx')({
options: {
mdPlugins: [
],
hastPlugins: [
]
}
})
module.exports = withMDX()
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withMDX = require('@zeit/next-mdx')()
module.exports = withMDX({
webpack(config, options) {
return config
}
})
Optionally you can match other file extensions for MDX compilation, by default only .mdx
is supported
// next.config.js
const withMDX = require('@zeit/next-mdx')({
extension: /\.mdx?$/
})
module.exports = withMDX()
Define the pagesExtensions
option to have Next.js handle .mdx
files in the pages
directory as pages:
// next.config.js
const withMDX = require('@zeit/next-mdx')({
extension: /\.mdx?$/
})
module.exports = withMDX({
pageExtensions: ['js', 'jsx', 'mdx']
})