@next/mdx

    11.0.1 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @next/mdx

    DownloadsWeekly Downloads

    18,809

    Version

    11.0.1

    License

    MIT

    Unpacked Size

    3.46 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar