Use MDX + front-matter with Next.js
npm install --save next-mdx-frontmatter
or
yarn add next-mdx-frontmatter
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.
---
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
extension(default:/\.mdx$/): the file extension matched with the resource.MDXOptions(default:{}): the options passed as MDX options.
MIT