rehype-mathjax hydration issue with Next.js

[danielhsy]

I’ve already posted this question on Stack Overflow for about a day without a response, so I’m posting it here in hopes of someone understanding how to solve it.

I’ve set up MDX with Next.js and I’m able to use it to set up pages. I’m also able to add plugins to remark and rehype through next.config.mjs. Although normal Markdown syntax and components work fine, I haven’t been able to set up MathJax with CHTML using remark-math and rehype-mathjax.

MathJax is being processed on the server side, but I’m seeing problems in my generated HTML markup where className is used for MathJax elements instead of the standard HTML class, causing styles to not working and math not to display. For example, the following appears in my output:

<mjx-c className="mjx-c2212"></mjx-c>

This issue appears in a Next app, so you can reproduce the issue by using npx create-next-app with npm install @next/mdx @mdx-js/loader @mdx-js/react rehype-mathjax remark-math. Then add this to next.config.mjs:

import nextMDX from "@next/mdx";

import remarkMath from "remark-math";
import rehypeMathjaxChtml from "./rehype-mathjax/chtml.js";

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm, remarkMath],
    rehypePlugins: [
      [
        rehypeMathjaxChtml,
        {
          chtml: {
            fontURL:
              "https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2",
          },
        },
      ],
    ],
  },
});
const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
  reactStrictMode: true,
};

export default withMDX(nextConfig);

Create a page such as index.mdx with math, for example $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$. The generated markup will include classNames for MathJax elements such as mjx-container instead of classes.

[wooorm]

See also remarkjs/remark-math#80.

[danielhsy]

See also remarkjs/remark-math#80.

Oh yeah I forgot to link that one. I have the same problem as one of the comments there, I just thought it would be nice to post it here as well as it seems to be more of a MDX issue.

[x-at-01]

Hi! If you are running into Next.js hydration mismatches and className issues when using rehype-mathjax or rehype-katex, a very clean and modern alternative is to compile LaTeX math formulas directly to browser-native MathML Core (<math> tags) at build time (compile-time) rather than dynamically rendering them on the client.

Since early 2023, all major browser engines natively support MathML Core, so you don't need to load heavy JS rendering engines or style sheets on the client side at all.

Because the HTML output contains pure static <math> tags, Next.js / React hydration works perfectly out-of-the-box without any DOM mutations, completely avoiding hydration mismatches and CSS layout problems.

I wrote @webc.site/math (GitHub: https://github.com/webc-site/math) — a 3.5KB zero-dependency compiler, and its remark plugin @webc.site/math-remark (NPM: https://www.npmjs.com/package/@webc.site/math-remark).

You can easily integrate it into your next.config.mjs MDX plugins configuration. It translates LaTeX equations directly to standard <math> tags at compile time, resolving Next.js hydration issues completely.

Demo: https://math.webc.site