How to integrate with `next-mdx-remote`

[tmkasun]

First, Thank you for maintaining such a nice code highlighter, I tried to integrate codehike in my blog site which uses next-mdx-remote for rendering the markdown, But I got errors while trying to integrate the codehike.

I'm using the serialize function from next-mdx-remote and getting the markdown content and passing it to the MDXRemote component.

This is my config (with codehike)

.
.
.
export async function getStaticProps({ params }: Params) {
    const { remarkCodeHike } = require("@code-hike/mdx");
    const post = getPostBySlug(params.slug);
    const mdxSource = await serialize(post.content, {
        // Optionally pass remark/rehype plugins
        mdxOptions: {
            remarkPlugins: [[remarkCodeHike]],
            rehypePlugins: [],
        },
    });

    return {
        props: {
            mdxSource,
            post,
        },
    };
}

With that, I got the below error

since it's saying _missingMdxReference I then wrapped the pages from '@mdx-js/react'

After wrapping with the MDXProvider component I got this error

Can someone please help me to integrate codehike with next-mdx-remote

Thanks in advance

[pomber]

Hi, thank you.

There's an example here. Since next-mdx-remote doesn't allow imports the configuration is different, the important part is in this file.

[wooorm]

P.S. Some of the things next-mdx-remote does can also be done by MDX itself (see https://mdxjs.com/guides/mdx-on-demand/ for more info). If the problem is imports, perhaps that can be sidestepped with this (which does support imports)?

[tmkasun]

Thanks, @wooorm & @pomber It worked!

https://me.knnect.com/blog/apim_320_customization