NextJS Blog With next-mdx-remote (1 of 2)

[@hannah2n]

In case anyone has import issues with renderToString and hydrate:
Replace import renderToString from 'next-mdx-remote/render-to-string' with import { serialize } from 'next-mdx-remote/serialize'
Replace import hydrate from 'next-mdx-remote/hydrate' with import { MDXRemote } from 'next-mdx-remote'
You could check the release notes to see the difference between previous and current version on GitHub hashicorp/next-mdx-remote/releases

[@adrianzawadzki1900]

Thanks for the video. Remember, however, that some changes have already occurred, e.g. instead of the renderToString method, we have serialize, which was marked as breaking change. Same for hydrate method.

[@BenjaminCarlson]

yeah this video is a bit old. I'll try and make a new one soon!

[@adrianzawadzki1900]

​@@BenjaminCarlson
The solution that works for me (next-mdx-remote v4)
First inside mdx.js
export async function getFileBySlug(type, slug) {
const source = fs.readFileSync(
join(root, "src", "cms-content", "blog", type, `${slug}.mdx`),
"utf8"
);
return source;
}
Then in getStaticProps:
const source = await getFileBySlug("posts", params.slug);
const mdxSource = await serialize(source, { parseFrontmatter: true });
return { props: { mdxSource } };
Finally we are returning jsx

[@espressothoughts]

Great content! Thank you

[@cloudkamp2694]

Thanks for the video, i have a question though, is there a way of loading the mdx files from an api to nextjs to read them from there, mostly i see static blog sites, but how about if you are building a dynamic site which you want to scale, you would need some form of API to store your mdx files, something like that.

[@naufaldbei4234]

so in this case you have to make your own mdx files manually if you want a new post to appear?

[@BenjaminCarlson]

yes

[@stevechow8892]

could you please talk about contentlayer, seem it's the future of nextjs + mdx, thank you!