v4.0.0-rc.1

next-mdx-remote has been upgraded to use MDX v2 under the hood, which comes with improved performance and a whole list of other enhancements. Due to the improved code generated from MDX, we've also been able to remove our usage of esbuild. If you're using Next v12, no changes should be required to upgrade! Users on Next v11.1 might need to set experimental: { esmExternals: true } in next.config.js.

Note that some of the underlying changes in MDX v2 may require you to adjust some of your MDX content or custom components.

Take it for a spin and let us know if you run into any issues. 🙏

$ npm install next-mdx-remote@next

Breaking Changes

• Exposes ESM
• Upgrade to MDX v2 under the hood, see the blog post for more information
• Remove esbuild integration

Features

• Optional frontmatter parsing by passing { parseFrontmatter: true } to serialize(). Frontmatter is then available in your MDX:

  # {frontmatter.page_title}
  
  Hello world!

• Improved error messages when MDX fails to compile:
  

Full Changelog: 3.0.7...v4.0.0-rc.1

3.0.8

Patches a small bug with remark options (#206), big thanks to @matthewoates for the contribution!

3.0.7

Roll back esbuild version update as it was causing issues with deployments consistently due to internal architecture changes

3.0.6

Update esbuild to latest version - thank you to @PabloSzx for the contribution!

v3.0.5

• Fix type declaration for requestIdleCallback to match the definition from TS 4.4 (#191)

Thanks to @jkjustjoshing for the contribution! ✨

3.0.4

• Update to the latest version of esbuild, thanks to @PabloSzx for the contribution!

3.0.3

Accidental tag, sorry! This can be ignored

3.0.2

Changes

• Fixed an esbuild binary resolution bug which was impacting consumers using next-mdx-remote in yarn workspaces (#145)
• Fixed an issue in the TypeScript docs section (#146)

Credits

Thanks to @younes200 for the documentation fix!

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 />

2.1.4

Previously, the peer dependency range for this library was very tight and cut off at react 17.0.1, so you'd get errors with the most recent react version. Now, it's a lot looser and will accept anything between react v16 and v18. Apologies for the annoyance!

This release also comes with a number of wonderful additions to the documentation, thanks to those who contributed!

Commit Log

• Add circleci config: 7f128a4
• Fix typo in README: 7fbc1ee
• Merge pull request #109 from Hocdoc/patch-1: f775df6
• Add example of replacing HTML tags as well: #113
• Loosen react peer dependency semver range: 528bcbf

Credits

Huge thanks to @eric-burel for helping!