Next.js + MDX で数式を扱う

この記事は2019年11月8日に書かれた別ブログの記事をZennに移行したものです。

Next.js と MDX で構築されたこのブログで、TeX を扱えるようにしていきたいと思います。
まず、@mdx-js/loader を入れます。
これは next.config.js 内で MDX 向けのプラグインをカスタマイズするのに必要です。入っていなければ、

npm install @mdx-js/loader

してください。

その後は、

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

してから、ドキュメンテーション通りに next.config.js を編集しましょう。

（2020.10.20 追記）
最新バージョンの remark-math と rehype-katex ではうまく数式がレンダリングされないことが判明したので、バージョンを付記しておきました。

このブログのリポジトリのコミットも参考にしてください。

これで TeX を使う準備が整います。
MDX 内で KaTeX CSS を挿入する必要があることにも注意しましょう（数式をブログでよく使う人は、
ブログのテンプレートにCSSの部分も加えた方がいいかもしれませんね！）。

$$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$$

これで無事に $\TeX$ が使えるようになりましたね！