Nocturnal Pajama Mutants

    next-mdx-builder
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.4 • Public • Published

    next-mdx-builder

    Next.js plugin that adds MDX pages support via next-mdx-remote & a custom Webpack plugin.

    Note

    • This has only been tested with Next.js 11 (Webpack 5).
    • Requires Node.js >= 14

    Install

    yarn add next-mdx-builder
    npm i --save next-mdx-builder

    API Reference

    type PluginOptions = SerializeOptions;

    SerializeOptions: https://github.com/hashicorp/next-mdx-remote/blob/main/src/types.ts#L2

    Usage

    Plugin

    Add and configure plugin in next.config.js:

    // next.config.js
    const withMdxBuilder = require("next-mdx-builder")({
      mdxOptions: {
        remarkPlugins: [require("remark-gfm")],
        rehypePlugins: [require("mdx-prism")],
      },
    });
    
    module.exports = withMdxBuilder(/** Next Config */ {});

    pages

    Directory tree:

    - layouts/
        - docs.jsx
    - pages/
        - docs/
            - introduction.mdx
    

    MDX (pages/docs/introduction.mdx):

    ---
    title: Introduction
    layout: "../../layouts/docs"
    ---
    
    # Docs Introduction Page

    Layout:

    export default function DocsPage({ children, frontMatter }) {
      return (
        <>
          <h1>{frontMatter.title}</h1>
          {children}
        </>
      );
    }

    Acknowledgements

    Keywords

    none

    Install

    npm i next-mdx-builder

    DownloadsWeekly Downloads

    9

    Version

    0.4.4

    License

    MIT

    Unpacked Size

    4.14 kB

    Total Files

    5

    Last publish

    Collaborators

    • arn4v