next-mdx

MDX Render tool for NextJS.

Installation

NPM

$ npm install @hitechline/next-mdx

Yarn

$ yarn add @hitechline/next-mdx

Usage

You must use the render() method in getInitialProps and hydrate in your component. See:

import { render } from '@hitechline/next-mdx';

// ...

export async function getStaticProps() {
  const markdown = `
# next-mdx

MDX Rendering tool for NextJS.
`;

  const renderData = await render(markdown /* ,options */);

  return {
    props: {
      renderData,
    },
  };
}

In component:

import { render } from '@hitechline/next-mdx';
import { Provider } from '@hitechline/next-mdx/provider';

const Page = ({ renderData }) => {
  return (
    <div>
      <Provider {...renderData} />
    </div>
  );
};

export async function getStaticProps() {
  // ...
}

export default Page;

API

render(markdown, [options])

> Return - RenderData

{
  html: string;
  code: string;
  requiredComponents: string[];
}

> Parameters

markdown

type: string
required: true

options - RenderOptions

type: object
required: false

options.scope

type: object
required: false

{
  scope: {
    [ComponentName: string]: React.ComponentType;
  }
}

options.remarkPlugins

type: array
required: false

{
  remarkPlugins: [...RemarkPlugin];
}

options.rehypePlugins

type: array
required: false

{
  rehypePlugins: [...RehypePlugin];
}

License

MIT © Hitechline