next-mdx-remote

Load MDX content from anywhere

MPL-2.0 License

Downloads
869.3K
Stars
2.7K
Committers
42
View Code on GitHub
Ecosystems: Markdown, Next, MDX, Terraform, Vagrant

Bot releases are visible (Hide)

next-mdx-remote - v5.0.0 Latest Release

Published by hashibot-web 5 months ago

Major Changes

  • #448 67a221f Thanks @dstaley! - Update to MDX v3 and add support for React 19. Fix various TypeScript errors. Remove usage of Rollup.
next-mdx-remote - v4.4.1

Published by BRKalow over 1 year ago

What's Changed

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.4.0...v4.4.1

next-mdx-remote - v4.4.0

Published by BRKalow over 1 year ago

This release includes a few fixes for frontmatter types, as well as a way to provide a frontmatter type to serialize or compileMDX and have it propagate through to the returned frontmatter property. See the documentation for an example.

serialize:

import { serialize } from 'next-mdx-remote/serialize'

interface Frontmatter {
  title: string
  published: string
  description?: string
}

//     👇 should have type Frontmatter
const { frontmatter } = serialize<Record<string, unknown>, Frontmatter>(source)

compileMDX:

import { compileMDX } from 'next-mdx-remote/rsc'

interface Frontmatter {
  title: string
  published: string
  description?: string
}

export default async function Page({ source }) {
	//              👇 should have type Frontmatter
	const { content, frontmatter } = await compileMDX<Frontmatter>(source)

	return (
		<>
			<h1>{frontmatter.title}</h1>
			{content}
		</>
	)
}

What's Changed

New Contributors

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.3.0...v4.4.0

next-mdx-remote - v4.3.0 - Server Components Support (experimental)

Published by BRKalow over 1 year ago

next-mdx-remote now has experimental support for React Server Components! 🎉 Access the new API by importing from next-mdx-remote/rsc, and head to the documentation for usage instructions and additional examples.

import { MDXRemote } from 'next-mdx-remote/rsc'

export default async function Page() {
  const mdxSource = await getContent()

  return (
    <MDXRemote source={mdxSource} />
  )
}

Big thanks to @timneutkens for his contribution!

What's Changed

New Contributors

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.2.1...v4.3.0

next-mdx-remote - v4.2.1

Published by BRKalow almost 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.2.0...v4.2.1

next-mdx-remote - v4.2.0

Published by BRKalow almost 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.1.0...v4.2.0

next-mdx-remote - v4.1.0

Published by BRKalow about 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.0.3...v4.1.0

next-mdx-remote - v4.0.3

Published by BRKalow over 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.0.2...v4.0.3

next-mdx-remote - v4.0.1

Published by BRKalow over 2 years ago

What's Changed

New Contributors

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/v4.0.0...4.0.1

next-mdx-remote - v4.0.0

Published by BRKalow over 2 years ago

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@latest

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:
    Screen Shot 2021-12-10 at 12 04 04 PM

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/3.0.7...v4.0.0

next-mdx-remote - v4.0.0-rc.1

Published by BRKalow almost 3 years ago

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:
    Screen Shot 2021-12-10 at 12 04 04 PM

Full Changelog: https://github.com/hashicorp/next-mdx-remote/compare/3.0.7...v4.0.0-rc.1

next-mdx-remote -

Published by jescalan almost 3 years ago

Patches a small bug with remark options (https://github.com/hashicorp/next-mdx-remote/pull/206), big thanks to @matthewoates for the contribution!

next-mdx-remote -

Published by jescalan almost 3 years ago

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

next-mdx-remote -

Published by jescalan about 3 years ago

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

next-mdx-remote - v3.0.5

Published by BRKalow about 3 years ago

Thanks to @jkjustjoshing for the contribution! ✨

next-mdx-remote -

Published by jescalan over 3 years ago

Accidental tag, sorry! This can be ignored

next-mdx-remote -

Published by jescalan over 3 years ago

  • Update to the latest version of esbuild, thanks to @PabloSzx for the contribution!
next-mdx-remote - 3.0.2

Published by BRKalow over 3 years ago

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!

next-mdx-remote - 3.0.0

Published by BRKalow over 3 years ago

⚠️ 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 />
next-mdx-remote -

Published by jescalan over 3 years ago

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: 7f128a4ec0960472df7ebcdbae84f292010bd540
  • Fix typo in README: 7fbc1ee4b36b6969a3c2a85d9e9559788a062814
  • Merge pull request #109 from Hocdoc/patch-1: f775df6ae2467e1d8765d37da7a819656ac9b83d
  • Add example of replacing HTML tags as well: #113
  • Loosen react peer dependency semver range: 528bcbf268cfc808bea4da722fa7fe03e1658daa

Credits

Huge thanks to @eric-burel for helping!

Package Rankings
Top 1.18% on Npmjs.org
Badges
Extracted from project README
next-mdx-remote
Related Projects
mdx-nextjs-13

Proof-of-Concept for rendering MDX files using Next.js 13 and next-mdx-remote

11 Dec 2022 4
next-mdx-relations

🌿 a set of utilities for generating and creating relations between pages in nextjs using md/x

20 Jun 2021 13
react-graphql-ssr

Setting up Apollo GraphQL in Next.js with Server Side Rendering

15 Apr 2020 23
next-mdx-remote-client

A wrapper of the `@mdx-js/mdx` for the `nextjs` applications in order to load MDX content. It is ...

29 Feb 2024 47
mdnext

The opinionated ecosystem for MDX powered NextJS apps for blogs, documentation, and more.

08 Jul 2020 321
remote-mdx

Use MDX in your React App

18 Mar 2024 8
recma-nextjs-static-props

Expose top-level identifiers in Next.js app.js

10 May 2022 20