What's the best way to render a dynamic MDX?

[devrsi0n]

What's the best way to render a dynamic MDX?
I got some webpack unsupported file type warnings when I use next/dynamic to import an MDX file

./public/favicon.ico 1:0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Key code:

pages/blog/post/[slug].js

const BlogPostPage = ({ filename }) => {
    const MDXContent = dynamic(() => import(`../../../${filename}`));
    return (
        <div>
            ...
        </div>
    )
}

export async function getStaticPaths() {
    const postsDirectory = path.join(process.cwd(), 'content/blog')
    const mdxFiles = fs.readdirSync(postsDirectory)
    const paths = mdxFiles.map(filename => ({
        params: {
            slug: filename.replace(".mdx", "")
        }
     })
    );
    return {
        paths,
        fallback: false
    };
}

Complete repo

[devrsi0n]

Can somebody help with this case?

[jamesmosier]

Check out next-mdx-remote

From their docs:

import renderToString from 'next-mdx-remote/render-to-string'
import hydrate from 'next-mdx-remote/hydrate'
import Test from '../components/test'

const components = { Test }

export default function TestPage({ mdxSource }) {
  const content = hydrate(mdxSource, components)
  return <div className="wrapper">{content}</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)
  return { props: { mdxSource } }
}

[devrsi0n]

James, thank you so much, you made my day!