Adding MDX to this Blog with Server Components

I thought this was going to be easier, but it got pretty difficult once I wanted to add Syntax highlighting.

Here is a snippet on how I ended up doing it, I dropped the built in Next support since I wasn't getting the results I wanted.

This component fetches the blog post content as an string, then compiles the mdx using next-mdx-remote/rsc

import compileMDX from '@/lib/compileMDX';
 
export default async function blog(props: Props) {
  const id = props.params.id;
  if (id == null) {
    return null;
  }
 
  const source = await getBlogPost(id);
  const { content } = await compileMDX(source);
 
  return <div>{content}</div>;
}

I added this function to wrap the compileMDX from the package, to have a single source of truth around the options.

export default async function compileMDX(source: MDXRemoteProps['source']) {
  return await compileMDX_INNER({
    source,
    components: getMDXComponents(),
    options: {
      mdxOptions: {
        remarkPlugins: [],
        rehypePlugins: [[rehypePrettyCode, rehypeOptions]],
      },
    },
  });
}

Finally getMDXComponents() just returns and object with components such as p, h1, etc.

Now you are seeing the beautiful result of adding these code blocks!!