nmf
next-mdx-frontmatter
npm i next-mdx-frontmatter
nmf

next-mdx-frontmatter

Use MDX + front-matter with Next.js

by Ian Chen

0.0.4 (see all)License:MITTypeScript:Not FoundCategories:Next.js YAML Parser
npm i next-mdx-frontmatter
Readme

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

Downloads/wk

89

GitHub Stars

26

LAST COMMIT

10mos ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.0.4
latest
10mos ago
No tutorials found
Add a tutorial