Nearsighted Paramecium Multiverse

    @foxmn/next-mdx

    9.2.3 • 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 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 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 @foxmn/next-mdx

    DownloadsWeekly Downloads

    1

    Version

    9.2.3

    License

    MIT

    Unpacked Size

    3.36 kB

    Total Files

    4

    Last publish

    Collaborators

    • foxmn