Adapt Next.js blog example for MDX

[jensmeindertsma]

Hello community!

In this example blog posts are read from the file system at build time and build with getStaticPaths and getStaticProps. I want to use this example but I'd like to use MDX inside my blog posts. Does anyone have any advice on how to convert this example to use MDX?

I understand from the example that it uses remark to parse the Markdown to a HTML string at build time. Can the same be done with @mdx-js/loader?

Please correct me if my understanding about MDX is fundamentally incorrect.

[jamesmosier]

Take a look at next-mdx-remote which allows you to use mdx within getStaticProps or getServerSideProps.

[jensmeindertsma]

Thanks so much for the response. I'm looking for a tool that can help me load these file contents in the same way as it's done in the original example. Perhaps this is not possible with MDX because the components are out of scope. But using that together with dynamic routes as done in the example makes it very easy to add a shared layout. I know about next-mdx-enhanced, but I'm just looking to see whether there is another way. I'd love to keep as much logic from the original example if possible. If this is a limitation of MDX, please tell me.