3.0.0

⚠️ This is a BREAKING RELEASE and will require manual changes ⚠️

This release includes a full rewrite of the internals of next-mdx-remote to make it faster, lighter-weight, and behave more predictably! The migration should be fairly quick for most use-cases, but it will require some manual changes. Thanks to our community for testing out this release and providing early feedback. ❤️

Major changes

• renderToString has been replaced with serialize
• hydrate has been replaced with <MDXRemote />
• Removed provider configuration, React context usage should now work without additional effort
• Content will now hydrate immediately by default
• Dropped support for IE11 by default

Migrating to v3

As of v3, usage of next-mdx-remote is slightly different. renderToString has been replaced with serialize, and hydrate has been removed in favor of the <MDXRemote /> component.

Under the hood, v3 is more efficient and we've fixed a number of long-standing caveats with the way it was implemented. Most users should notice improved performance across the board!

First step:

// npm
npm install next-mdx-remote@latest

// yarn
yarn add next-mdx-remote@latest

Here's what the diff looks like to migrate a simple implementation:

- import renderToString from 'next-mdx-remote/render-to-string'
+ import { serialize } from 'next-mdx-remote/serialize'
- import hydrate from 'next-mdx-remote/hydrate'
+ import { MDXRemote } from 'next-mdx-remote'

import Test from '../components/test'

const components = { Test }

export default function TestPage({ source }) {
-  const content = hydrate(source, { components })
  return (
    <div className="wrapper">
-      {content}
+      <MDXRemote {...source} components={components} />
    </div>
  )
}

export async function getStaticProps() {
  // MDX text - can be from a local file, database, anywhere
  const source = 'Some **mdx** text, with a component <Test />'
-  const mdxSource = await renderToString(source, { components })
+  const mdxSource = await serialize(source)
  return { props: { source: mdxSource } }
}

Context

Context usage and providers will now work without any additional configuration. Any contexts which are rendered higher up in the tree should be available for use within your rendered MDX. This should also fix a number of SSR-related CSS-in-JS bugs users were experiencing.

Content Hydration

By default, <MDXRemote /> will now hydrate immediately. If you wish to retain the lazy hydration behavior, pass the lazy prop:

<MDXRemote {...source} lazy />