I have been wanting to get back into blogging, but building a completely new CMS from scratch isn’t fun. Currently, I write posts in Markdown and use KaTeX to render LaTeX-style math equations. I recently found that NextJS v15 now supports MDX content more natively (https://nextjs.org/docs/app/guides/mdx), making it easier to create a Markdown based CMS.

However, upgrading from Next.js v14 to v15 has been a headache. On top of that, the authentication system which I was using, Lucia, has been depreciated and now I have to migrate everything to Auth.js. With the migration of existing Markdown CMS with the authentication overhauls has made the whole process messy.

With that being said, I can now embed React components directly in my posts. Here is a very cool example:

This is a simple blog post. The text is written in the embed React component and here is the canvas animation being rendered and run in the standalone React component.

Note: this component was generated using ChatGPT.

Pretty cool, eh? With MDX, you can insert dynamic React component right alongside your content. While MDX is not exclusive to Next.js (you can integrate React MDX with your app too), since my site already uses Next.js, I can follow the official documentation to dynamically load and map React components based on a components field in the database.

Here is another example, this time, using remark-math and rehype-katext to render math equation:

$$1 + 2 + 3 + ... + n = \sum_{i=1}^{n}i = \frac{n(n + 1)}{2}$$

Here is also another example using MathGraph component that renders the following equation:

$$y=x^2-4x+3$$