Nicer Package Manager

    remark-mdx-next
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    remark-mdx-next

    A remark plugin for converting frontmatter metadata into getStaticProps

    Keep your MDX files clean! Based on the great remark-mdx-frontmatter plugin.

    Installation

    This package depends on the AST output by remark-frontmatter

    npm install remark-frontmatter remark-mdx-next

    Usage

    This remark plugin takes frontmatter content from mdx files and outputs it as props in getStaticProps for use in Next.js apps. Both YAML and TOML frontmatter data are supported. It also maintains the core functionality of remark-mdx-frontmatter.

    Combine this plugin with the MDXProvider's wrapper component and you can keep your MDX files completely free of anything other than metadata and content.

    For example, given a file named example.mdx with the following contents:

    ---
    hello: frontmatter
    ---
    
    Rest of document

    The following script:

    import { readFileSync } from 'fs';
    import remarkFrontmatter from 'remark-frontmatter';
    import { remarkMDXNext } from 'remark-mdx-next';
    import { compileSync } from 'xdm';
    
    const { contents } = compileSync(readFileSync('example.mdx'), {
      jsx: true,
      remarkPlugins: [remarkFrontmatter, remarkMDXNext],
    });
    console.log(contents);

    Roughly yields:

    export const hello = 'frontmatter';
    export function getStaticProps() {
      return {
        props: {
          hello: 'frontmatter',
        },
      };
    }
    export default function MDXContent() {
      return <p>Rest of document</p>;
    }

    Options

    name

    By default, every frontmatter object key is turned into a JavaScript export. If name is specified, the YAML content is exported as one single export using this name. This is useful if you wish to use top-level frontmatter nodes other than objects, or if the frontmatter content contains keys which aren’t valid JavaScript identifiers.

    Install

    npm i remark-mdx-next

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    9.52 kB

    Total Files

    5

    Last publish

    Collaborators

    • omidantilong