Advanced MDX support for Next.js
Adds support for MDX with advanced syntax features in Next.js applications
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
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
Seeoptions.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:- Clone this repo
git clone https://github.com/JS-DevTools/next-mdx.git
- Install dependencies
npm install
- Build the code
npm run build
- 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.