如何在Next.js中结合MDX与KaTeX渲染数学公式？

核心问题分析 #

1. 同时存在next.config.mjs和next.config.js两个配置文件，Next.js只会读取其中一个，导致MDX配置混乱不生效。
2. next.config.mjs中引用了未导入的remarkGfm插件，会引发运行错误。
3. 开启了实验性的mdxRs（Rust版MDX编译器），它与remark-math、rehype-katex这类插件兼容性较差。

分步修复方案 #

1. 清理重复配置文件

直接删除next.config.js，只保留next.config.mjs作为唯一配置文件。

2. 修正next.config.mjs配置

补全缺失的插件导入，关闭mdxRs以避免插件兼容性问题，完整配置如下：

import createMDX from '@next/mdx'
import remarkGfm from 'remark-gfm' // 补全缺失的插件导入
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    // 关闭mdxRs，避免与现有插件冲突
    // mdxRs: true,
  },
}

const withMDX = createMDX({
  options: {
    extension: /\.mdx?$/,
    remarkPlugins: [remarkGfm, remarkMath],
    rehypePlugins: [rehypeKatex],
    // 若使用MDXProvider，可取消下方注释
    // providerImportSource: "@mdx-js/react",
  },
})

export default withMDX(nextConfig)

3. 优化KaTeX样式导入

在app/layout.tsx（appDir全局布局文件）中导入KaTeX样式，确保所有页面都能加载样式：

import 'katex/dist/katex.min.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  )
}

4. 验证MDX文件中的公式写法

确保公式使用标准KaTeX语法：

• 行内公式：$E=mc^2$
• 块级公式：

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

额外说明 #

如果一定要使用mdxRs，需要改用官方推荐的兼容插件方案，但目前该功能仍处于实验阶段，稳定性不如传统JS版MDX编译器，建议优先使用上述修复方案。

内容的提问来源于stack exchange，提问作者shark