Next.js用remark-math/rehype-katex渲染MDX报严格模式警告如何解决

该警告由rehype-katex默认开启的严格模式触发：块级数学公式（$$包裹的展示模式公式）中直接使用了\\或\newline做换行，而标准LaTeX语法中，这两个命令在展示模式下本身不具备换行效果，因此插件抛出兼容性提示。

可根据需求二选一：

方案1：修正公式写法（推荐） #

不要直接在块级公式里用\\/\newline硬换行，需要多行公式时使用LaTeX标准的多行数学环境包裹，兼容性最好，也完全符合语法规范。

• 错误写法示例：

$$
a = b + c \\
d = e * f
$$

• 修正后写法：

$$
\begin{aligned}
a &= b + c \\
d &= e * f
\end{aligned}
$$

方案2：调整插件配置关闭对应警告 #

如果不想修改现有公式内容，可以给rehype-katex传入自定义严格模式配置，单独忽略该类警告，也可以直接关闭所有严格模式检测。
修改next.config.mjs配置如下：

import nextMDX from '@next/mdx';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

const nextConfig = {
  reactStrictMode: true,
};

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [
      [
        rehypeKatex,
        {
          // 自定义严格模式规则
          strict: (errorCode) => {
            // 忽略块级公式内换行的警告
            if (errorCode === 'newLineInDisplayMode') return 'ignore';
            // 其余规则保持默认警告级别
            return 'warn';
          },
          // 若要关闭所有严格模式警告，直接替换为 strict: 'ignore' 即可
        }
      ]
    ],
    providerImportSource: '@mdx-js/react',
  },
});

export default withMDX({
  // 修正原配置的写法问题：展开nextConfig保证配置项正确生效
  ...nextConfig,
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
});

注：原配置中withMDX传参时直接传入nextConfig属性的写法有误，会导致nextConfig内的配置无法被正确读取，需要用展开运算符...将配置项平铺到导出对象中，上述代码已修正该问题。

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