Skip to content
Branch: master
Find file History
#6151 Compare This branch is 1 commit ahead, 198 commits behind canary.
Latest commit 0dbd3b9 Apr 17, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
index.js Move next-mdx from zeit/next-plugins to zeit/next.js (#6443) Mar 4, 2019
license.md Move next-mdx from zeit/next-plugins to zeit/next.js (#6443) Mar 4, 2019
package.json v8.1.0 Apr 17, 2019
readme.md

readme.md

Next.js + MDX

Use MDX with Next.js

Installation

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

or

yarn add @next/mdx @mdx-js/loader

Usage

Create a next.config.js in your project

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

Optionally you can provide MDX options:

// next.config.js
const withMDX = require('@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('@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('@next/mdx')({
  extension: /\.(md|mdx)$/
})
module.exports = withMDX()

Top level .mdx pages

Define the pagesExtensions option to have Next.js handle .mdx files in the pages directory as pages:

// next.config.js
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx']
})
You can’t perform that action at this time.