Switch branches/tags
@zeit/next-workers@1.0.1-canary.1 @zeit/next-workers@1.0.1-canary.0 @zeit/next-workers@1.0.0 @zeit/next-workers@0.0.2-canary.0 @zeit/next-typescript@1.1.2-canary.0 @zeit/next-typescript@1.1.1 @zeit/next-typescript@1.1.1-canary.3 @zeit/next-typescript@1.1.1-canary.2 @zeit/next-typescript@1.1.1-canary.1 @zeit/next-typescript@1.1.1-canary.0 @zeit/next-stylus@1.0.2-canary.2 @zeit/next-stylus@1.0.2-canary.1 @zeit/next-stylus@1.0.2-canary.0 @zeit/next-stylus@1.0.1 @zeit/next-stylus@1.0.0 @zeit/next-stylus@0.1.1-canary.3 @zeit/next-stylus@0.1.1-canary.2 @zeit/next-stylus@0.1.1-canary.1 @zeit/next-stylus@0.1.1-canary.0 @zeit/next-source-maps@0.0.4-canary.1 @zeit/next-source-maps@0.0.4-canary.0 @zeit/next-source-maps@0.0.3 @zeit/next-source-maps@0.0.3-canary.1 @zeit/next-source-maps@0.0.3-canary.0 @zeit/next-sass@1.0.2-canary.2 @zeit/next-sass@1.0.2-canary.1 @zeit/next-sass@1.0.2-canary.0 @zeit/next-sass@1.0.1 @zeit/next-sass@1.0.0 @zeit/next-sass@0.2.1-canary.3 @zeit/next-sass@0.2.1-canary.2 @zeit/next-sass@0.2.1-canary.1 @zeit/next-sass@0.2.1-canary.0 @zeit/next-preact@0.1.1-canary.0 @zeit/next-preact@0.1.0 @zeit/next-preact@0.0.8-canary.1 @zeit/next-preact@0.0.8-canary.0 @zeit/next-mdx@1.2.1-canary.0 @zeit/next-mdx@1.2.0 @zeit/next-mdx@1.1.1-canary.2 @zeit/next-mdx@1.1.1-canary.1 @zeit/next-mdx@1.1.1-canary.0 @zeit/next-less@1.0.2-canary.2 @zeit/next-less@1.0.2-canary.1 @zeit/next-less@1.0.2-canary.0 @zeit/next-less@1.0.1 @zeit/next-less@1.0.0 @zeit/next-less@0.3.1-canary.3 @zeit/next-less@0.3.1-canary.2 @zeit/next-less@0.3.1-canary.1 @zeit/next-less@0.3.1-canary.0 @zeit/next-css@1.0.2-canary.2 @zeit/next-css@1.0.2-canary.1 @zeit/next-css@1.0.2-canary.0 @zeit/next-css@1.0.1 @zeit/next-css@1.0.0 @zeit/next-css@0.2.1-canary.3 @zeit/next-css@0.2.1-canary.2 @zeit/next-css@0.2.1-canary.1 @zeit/next-css@0.2.1-canary.0 @zeit/next-bundle-analyzer@0.1.3-canary.1 @zeit/next-bundle-analyzer@0.1.3-canary.0 @zeit/next-bundle-analyzer@0.1.2 @zeit/next-bundle-analyzer@0.1.2-canary.4 @zeit/next-bundle-analyzer@0.1.2-canary.3 @zeit/next-bundle-analyzer@0.1.2-canary.2 @zeit/next-bundle-analyzer@0.1.2-canary.1 @zeit/next-bundle-analyzer@0.1.2-canary.0
Nothing to show
Find file History
timneutkens Publish
 - @zeit/next-bundle-analyzer@0.1.3-canary.1
 - @zeit/next-css@1.0.2-canary.2
 - @zeit/next-less@1.0.2-canary.2
 - @zeit/next-mdx@1.2.1-canary.0
 - @zeit/next-preact@0.1.1-canary.0
 - @zeit/next-sass@1.0.2-canary.2
 - @zeit/next-source-maps@0.0.4-canary.1
 - @zeit/next-stylus@1.0.2-canary.2
 - @zeit/next-typescript@1.1.2-canary.0
 - @zeit/next-workers@1.0.1-canary.1
Latest commit 404368d Nov 14, 2018
Permalink
..
Failed to load latest commit information.
index.js Make MDX plugin extension configurable (#176) May 16, 2018
package.json Publish Nov 14, 2018
readme.md Document pagesExtensions for .mdx Jun 7, 2018

readme.md

Next.js + MDX

Use MDX with Next.js

Installation

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

or

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

Usage

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()

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('@zeit/next-mdx')({
  extension: /\.mdx?$/
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx']
})