Handling Mathematical Formulas in Next.js + MDX

This article is a migration to Zenn of a post written on another blog on November 8, 2019.

In this blog built with Next.js and MDX, I would like to enable support for TeX.
First, install @mdx-js/loader.
This is necessary for customizing MDX plugins within next.config.js. If you haven't installed it yet,

npm install @mdx-js/loader

please do so.

After that, run

npm install remark-math@3.0.1
npm install rehype-katex@3.0.0

and then edit next.config.js following the documentation.

(Update 2020.10.20)
It turned out that formulas are not rendered correctly with the latest versions of remark-math and rehype-katex, so I have specified the versions.

Please also refer to the commit in this blog's repository.

Now you are ready to use TeX.
Note that you also need to insert KaTeX CSS within MDX (if you use formulas frequently, it might be better to add the CSS part to the blog template!).

$$L = \frac{1}{2} \rho v^2 S C_L$$

$$f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi$$

Now you can successfully use $\TeX$!