Nana Plays Minesweeper

    @jsdevtools/next-mdx
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    Advanced MDX support for Next.js

    Adds support for MDX with advanced syntax features in Next.js applications

    Cross-Platform Compatibility Build Status

    Coverage Status Dependencies

    npm License Buy us a tree

    This library wraps the official Next.js + MDX plugin and configures it with additional Remark and Rehype plugins to enable advanced Markdown syntax and make MDX easier to use for our specific use-cases.

    Features

    • Adds support for YAML frontmatter

      • Automatically adds createdAt and modifiedAt frontmatter fields. Useful for populating <meta> tags for SEO and social media.
      • Adds support for a layout frontmatter field, which can be used to customize the React layout component to use for each MDX page.
    • Passes a markdown boolean to React components to indicate whether they originally came from Markdown syntax. This allows you to distinguish between **bold** and <b>bold</b> which can be used to apply different styling, or even render completely different JSX.

    • Rewrites links to MDX files (e.g. /pages/docs/some-page.mdx becomes /pages/docs/some-page)

    • Detects broken links to MDX files

    Usage

    Install the library via npm:

    npm install @jsdevtools/next-mdx

    Then use it in your next.config.js file:

    const nextMDX = require("@jsdevtools/next-mdx");
    
    const withMDX = nextMDX({
      // Next-MDX options go here
      siteURL: "http://example.com"
    });
    
    module.exports = withMDX({
      // Next.js options go here
      pageExtensions: ["tsx", "mdx"],
    });

    Options

    See options.ts for all of the options that you can pass to Next-MDX.

    NOTE: Don't confuse the Next-MDX options with the Next.js options. Refer to the code example above to see where each goes.

    Contributing

    Contributions, enhancements, and bug-fixes are welcome! Open an issue on GitHub and submit a pull request.

    Building

    To build the project locally on your computer:

    1. Clone this repo
      git clone https://github.com/JS-DevTools/next-mdx.git

    2. Install dependencies
      npm install

    3. Build the code
      npm run build

    4. Run the tests
      npm test

    License

    Next MDX is 100% free and open-source, under the MIT license. Use it however you want.

    This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

    Big Thanks To

    Thanks to these awesome companies for their support of Open Source developers

    GitHub NPM Coveralls Travis CI SauceLabs

    Install

    npm i @jsdevtools/next-mdx

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    52.8 kB

    Total Files

    39

    Last publish

    Collaborators

    • philsturgeon
    • jamesmessinger