总结

我正在尝试让remark插件工作。在这个例子中，github风格的markdown。我正在跟踪这些文档：https://beta.nextjs.org/docs/guides/mdx#remark-and-rehype-plugins
我的下一个.config.mjs看起来像这样。

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: true,
  },
}

export default withMDX(nextConfig);

./lib/mdx/remark.mjs文件如下所示：

import { mdxAnnotations } from 'mdx-annotations'
import remarkGfm from 'remark-gfm'

export const remarkPlugins = [mdxAnnotations.remark, remarkGfm]

当我尝试在messages.mdx中运行一些减价（如表格或删除线）时，它无法正确呈现

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

附加信息

注意，我的next.config.mjs与文档的实现略有不同，这是因为我不清楚文档如何处理nextConfig的全部范围。
医生说next.config.mjs应该像...

import addMdx from '@next/mdx';

addMdx(nextConfig, {
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  }
})

export default {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'mdx'],
  experimental: {
    appDir: true,
    mdxRs: true,
  }
}