In this article, we'll talk about how to use mdx-bundler with Next.js. MDX is the extension of markdown that allows us to write React Components inside markdown files. It helps us to make our content very interactive and dynamic. I got to know the mdx-bundler package from Josh's blog . post created this package. In my opinion, mdx-bundler gives Superpowers to mdx. Kent C Dodds Let's take a deeper look into mdx-bundler, and I'll guide you through all the features of this package. Let's get started with mdx-bundler mdx-bundler is an asynchronous function to compile and bundle our MDX files with their dependency. To compile mdx files, it uses XDM, a powerful MDX compiler with lots of features. mdx-bundler is best suited for the framework. In this article, I'll be using NextJS. SSR To create a new NextJS project, run this command. npx create-next-app@latest appname

or

yarn create next-app appname Now run the following command to install mdx-bundler npm install --save mdx-bundler esbuild

or

yarn add mdx-bundler esbuild To compile and bundle our MDX files, we need to use the function in this package. It takes two parameters, the first parameter is our MDX code in a string format, and the second parameter accepts an options object. bundleMDX import {bundleMDX} from 'mdx-bundler'

const mdxSource = `

title: Example Post published: 2021-02-13 description: This is some description

* * *

# Wahoo

import Demo from './demo'

Here's a **neat** demo:

<Demo /> `.trim()

const result = await bundleMDX(mdxSource, { files: { './demo.tsx': ` import \* as React from 'react'

function Demo() { return <div>Neat demo!</div> }

export default Demo `, }, })

const {code, frontmatter} = result To render the bundled MDX code, we need to import in the client getMDXComponent import * as React from 'react'

import {getMDXComponent} from 'mdx-bundler/client'

function Post({code, frontmatter}) {

const Component = React.useMemo(() => getMDXComponent(code), [code])

return ( 
<>
 <header>
  <h1>{frontmatter.title}</h1>
    <p>{frontmatter.description}</p>
 </header>
 <main>
 <Component />
 </main> 
</> ) } Check out this to find all available options. link Most of the mdx blogs are using local mdx files to store their blog contents. In my case, I'm using GraphCMS to store the mdx data. If you don't know what GraphCMS is, where I explain how to get started with it. Check out my blog post Now we have a basic understanding of how to use mdx-bundler. Let's breakdown down the code, and I'll guide you on how I used mdx-bundler in this blog. export const getStaticProps = async (context) => {

if (process.platform === 'win32') { process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'esbuild.exe'); } else { process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'bin', 'esbuild'); }

const { slug } = context.params;

const post = await getSinglePost(slug);

const result = await bundleMDX(post.content, { 
  xdmOptions(options) {
   options.rehypePlugins = [...(options.rehypePlugins ?? []), rehypeMdxCodeMeta];
   options.remarkPlugins = [...(options.remarkPlugins ?? []), gfm, emoji];
 return options;
  },
 ...(post.files ? { files: post.files } : {}),
 });

return { props: { ...result, }, }; }; Sometimes Nextjs doesn't find the exact path of esbuild. Due to this reason, we might get this error. To resolve this issue, we are manually adding the executable path. ENOENT(Error No Entry) if (process.platform === 'win32') {
    process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'esbuild.exe');
  } else {
    process.env.ESBUILD_BINARY_PATH = path.join(process.cwd(), 'node_modules', 'esbuild', 'bin', 'esbuild');
  } Reference https://www.alaycock.co.uk/2021/03/mdx-bundler#esbuild-executable To add the custom remark and rehype plugins to our bundler, use the xdmOptions object to achieve this behavior. xdmOptions(options) {
      options.rehypePlugins = [...(options.rehypePlugins ?? []), rehypeMdxCodeMeta];
      options.remarkPlugins = [...(options.remarkPlugins ?? []), gfm, emoji];
      return options;
 } Want to create a custom plugin? Check this post where explained everything in detail. Pedro Duarte Reference https://github.com/rehypejs/rehype/blob/main/doc/plugins.md https://github.com/remarkjs/remark/blob/main/doc/plugins.md The main difference between mdx-bundler and other libraries is that most of the libraries do not bundle mdx code. They also don't have the option to add the dependency to our mdx code. We can achieve this dependency import feature using both files and the CWD option. In this blog, I used files to add the dependency code. ...(post.files ? { files: post.files } : {}), I hope that you have learned how to use mdx-bundler with Nextjs. Thanks for reading ✌️ and if you enjoyed this article, share it with your friends and colleagues.

SuperPower

How to Create Apple Music's Background Blur Effect Using Blurhash

How to Create Dynamic Open Graph Images

Blog

Read My Stories

Portfolio

Support Me On Patreon

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Too Long; Didn't Read

How to Use mdx-bundler with Next.js

How to Use mdx-bundler with Next.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Create Apple Music's Background Blur Effect Using Blurhash

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

How to Create Apple Music's Background Blur Effect Using Blurhash

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps