Neutered Puppy Masquerade

    next-mdx-frontmatter

    0.0.4 • Public • Published

    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

    Install

    npm i next-mdx-frontmatter

    DownloadsWeekly Downloads

    119

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    4.47 kB

    Total Files

    5

    Last publish

    Collaborators

    • patrickchen