next-mdx-frontmatter

Use MDX + front-matter with Next.js

Installation

npm install --save next-mdx-frontmatter

or

yarn add next-mdx-frontmatter

Usage

Create a next.config.js in your project

// next.config.js
const withMdxFm = require('next-mdx-frontmatter')

let config = {}

// ...rest of your config

config = withMdxFm()(config) // Or withMdxFm(MdxFmOptions)(config)

module.exports = config

Then, all imported resources matching .mdx can be used as React components.

Example

---
title: Example Page
description: Lorem ipsum dolor sit amet.
published: true
---

<div>

## Second Title

</div>

will be transformed into the following JSX (or something equivalent)

import React from 'react'

export default (
  <div>
    <h2>Second Title</h2>
  </div>
)

export const title = 'Example Page'
export const description = 'Lorem ipsum dolor sit amet.'
export const published = true

Then, this module can be used as

import Article, { title, description, published } from './article.mdx'

// rest of the application

Options

• extension (default: /\.mdx$/): the file extension matched with the resource.
• MDXOptions (default: {}): the options passed as MDX options.

License

MIT