Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @next/mdx with all npm packages installed. Try it out:

require("@mdx-js/loader/package.json"); // @mdx-js/loader is a peer dependency. var mdx = require("@next/mdx")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@next/mdx v9.5.5

Next.js + MDX

Use MDX with Next.js

Installation

npm install @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 plugins:

// next.config.js
const withMDX = require('@next/mdx')({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
})
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 pageExtensions 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'],
})

Typescript

Follow this guide from the MDX docs.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free