Next Mdx Enhanced

**Note** This repository is no longer maintained or in-use at HashiCorp. As of March 2023, the repository is archived.

Next.js + MDX Enhanced

[](https://circleci.com/gh/hashicorp/next-mdx-enhanced)

Are you using [Next.js](https://github.com/zeit/next.js) with [MDX](https://mdxjs.com) and wanted layouts and [front matter](https://jekyllrb.com/docs/front-matter/)? That's exactly what this plugin will do for you! 🌟

⚠️ You probably should be using [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) instead of this library. It is ~50% faster, more flexible with content storage, does not induce memory issues at scale, and fits much better with the way that data is intended to flow through next.js.

For example, if have a site that displays content (e.g. documentation) that looks like:

MyDocsApp
├─ pages
│  ├ index.jsx
│  └ docs
│    ├ intro.mdx
│    └ advanced.mdx
├─ layouts
│  └ docs-page.jsx
└ next.config.js

And you want the following:

feature	next-mdx-enhanced	@next/mdx
MDX files render as a navigable page	✅	✅
MDX files render with a common layout	✅	❌
An index page that contains a navigable link to each MDX	✅	❌

Installation

Install the package:

$ npm install next-mdx-enhanced

Usage & Options

Open the `next.config.js` file and instantiate it as a Next.js plugin:

// next.config.js
const withMdxEnhanced = require('next-mdx-enhanced')

module.exports = withMdxEnhanced({
  layoutPath: 'layouts',
  defaultLayout: true,
  fileExtensions: ['mdx'],
  remarkPlugins: [],
  rehypePlugins: [],
  usesSrc: false,
  extendFrontMatter: