Server-Rendered LaTeX with KaTeX & JSX!

By Your Name • 2025-05-06 • 7 min read
#Next.js#KaTeX#SSR#MDX#JSX

Rendering LaTeX server-side and using JSX/React components in MDX.

This post demonstrates server-side rendering of LaTeX using KaTeX and the ability to embed JSX in a Next.js application using next-mdx-remote.

Inline Math

The equation E=mc2E=mc^2 is still perfectly rendered.

Display Math

∮SB⋅dS=0\oint_S \mathbf{B} \cdot d\mathbf{S} = 0

Using JSX

We can now use standard HTML tags with custom attributes, which will be processed by our CustomLink component if it's an <a> tag:

This is an external link that opens in a new tab.

This is an internal link.

And this is a link to a section on this page.

This is a simple div styled with inline JSX!

Pretty cool, right?