如何让remark插件在Next.js 13的MDX环境中正常生效？

算力阿峰

2026-7-28

解决Next.js 13 MDX中remark-gfm不生效的问题

问题原因

你启用了Next.js的experimental.mdxRs（基于Rust的MDX编译器），但该模式不兼容JavaScript编写的remark/rehype插件（包括remark-gfm和mdx-annotations的remark插件），导致删除线、表格等GFM语法无法被正确解析渲染。

解决方案

方案1：关闭mdxRs（快速解决）

修改next.config.mjs中的experimental.mdxRs为false，切换回JavaScript版MDX编译器，现有插件配置即可正常工作：

import { remarkPlugins } from "./lib/mdx/remark.mjs";
import nextMDX from "@next/mdx";

const withMDX = nextMDX({
  options: {
    remarkPlugins,
  },
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
  experimental: {
    appDir: true,
    mdxRs: false, // 改为false
  },
}

export default withMDX(nextConfig);

修改后重启开发服务器，删除线、表格等GFM语法即可正常渲染。

方案2：保留mdxRs，使用兼容的Rust插件（进阶）

如果想继续使用Rust版MDX编译器的性能优势，需要使用支持Rust生态的插件。目前remark-gfm的Rust实现已集成到MDX工具链中，可通过配置rehypePlugins启用GFM支持，同时替换不兼容的JS插件：

安装兼容的rehype插件：

npm install rehype-gfm

修改next.config.mjs，切换为Rust兼容的插件：

import rehypeGfm from 'rehype-gfm';
import nextMDX from "@next/mdx";

const withMDX = nextMDX({
  options: {
    rehypePlugins: [rehypeGfm], // 使用Rust兼容的GFM插件
    // 移除原有的JS remark插件，避免冲突
  },
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
  experimental: {
    appDir: true,
    mdxRs: true,
  },
}

export default withMDX(nextConfig);