How to render MDX string as a react component?

[melvin2016]

This is my pages directory.

This is my posts directory with the .mdx files

I have a hierarchy like this for my blog. I'm dynamically creating blog links using getStaticPaths function like this.

export async function getStaticPaths() {
  const fs = require("fs");
  const path = require("path");
  const filesString = fs.readdirSync(path.join("content", "posts/")).toString();
  const linksArray = filesString.split(",");
  const params = linksArray.map((link) => ({
    params: {
      link: link.replace(".mdx", ""),
    },
  }));

  return {
    paths: params,
    fallback: false,
  };
}

And providing data to each link using the getStaticProps function

export async function getStaticProps({ params }) {
  const mdx = require("@mdx-js/mdx");
  const fs = require("fs");
  const path = require("path");
  const matter = require("gray-matter");
  // Get File and get YAML data from markdown
  const post = fs
    .readFileSync(path.join("content", "posts/", `${params.link}.mdx`))
    .toString();
  const { data, content } = matter(post);

  // Serialize date
  const dateOptions = { year: "numeric", month: "long", day: "numeric" };
  const formattedDate = data.date.toLocaleDateString("en-US", dateOptions);

  // Make metadata
  const frontMatter = {
    ...data,
    date: formattedDate,
    link: params.link,
  };

  const jsx = mdx.sync(content);
  console.log(jsx);

  return {
    props: {
      content: `# ${data.title}
      \n<p className="date">${formattedDate}<p>
      \n${content}`,
      frontMatter,
    },
  };
}

But I want to render my JSX which is generated from the mdx.sync() function. How can I do this?

[Vadorequest]

I'm also trying to achieve something very similar.

• Learn how to use MXD (Markdown + JSX + HTML) with Next.js (using TypeScript) #13843 I've made a POC with Next a few days ago (just discovered MDX), but it doesn't support what you want to do, only from file.
• How to handle the following? mdx-js/mdx#126

The official MDX doc seem to use a virtual file (need to dig in, may be the solution):
https://mdxjs.com/advanced/api#compiler

I don't know if that helps, hope so!

[mixja]

See https://github.com/hashicorp/next-mdx-remote

[melvin2016]

Just what I was looking for I think. +1

[deadcoder0904]

@melvin2016 next-mdx-remote works like a charm but if you want to put images in the same folder as the posts it doesn't work.

I have the same structure as you & this worked like a charm for me → #9524 (comment)

I have a minimal repo if you want to have a look (images aren't working currently but I'm working on it) → https://github.com/deadcoder0904/blog-mdx-next/