在NextJS中如何让Codehike Bright读取MDX组件的Props

MDX代码块默认会将内容视为纯文本，不会解析其中的JSX表达式，所以{props.version}会被直接当作字符串显示，而非插值渲染。以下是几种可行的解决方法：

方法一：自定义代码块组件处理插值 #

创建一个自定义的代码块组件，手动替换代码中的变量占位符：

1. 编写CodeBlock.tsx组件：

export default function CodeBlock({ code, version }) {
  // 将代码中的{{version}}占位符替换为传入的version值
  const interpolatedCode = code.replace(/{{version}}/g, version);
  return <pre><code>{interpolatedCode}</code></pre>;
}

2. 在MDX文件中导入并使用该组件：

import CodeBlock from './CodeBlock';

<CodeBlock code="const appVersion = '{{version}}';" version={props.version} />

方法二：扩展Codehike Bright的代码渲染逻辑 #

通过自定义Codehike的Code组件，在渲染时处理插值：

在加载MDX的page.tsx中，自定义components配置：

import { useMDXComponent } from 'next-mdx-remote/rsc';
import { Code } from 'codehike/bright';

export default async function Page() {
  // 假设这里获取你的MDX源内容
  const mdxSource = await fetchYourMdxContent();
  const MDXComponent = useMDXComponent(mdxSource, {
    components: {
      code: ({ children, ...props }) => {
        // 替换代码中的{props.version}为实际传入的版本号
        const processedCode = children.replace(/\{props\.version\}/g, props.version);
        return <Code {...props}>{processedCode}</Code>;
      },
    },
  });

  return <MDXComponent version="1.2.3" />;
}

方法三：预编译MDX内容时替换变量 #

在服务端读取MDX内容后，直接替换其中的变量占位符，再进行渲染：

import fs from 'fs/promises';
import { useMDXComponent } from 'next-mdx-remote/rsc';

export default async function Page() {
  const rawMdx = await fs.readFile('./path/to/your/content.mdx', 'utf8');
  // 替换所有{props.version}为实际版本号
  const interpolatedMdx = rawMdx.replace(/\{props\.version\}/g, '1.2.3');
  const MDXComponent = useMDXComponent(interpolatedMdx);

  return <MDXComponent />;
}

注意：由于使用的是React Server Components，确保所有变量替换逻辑都在服务端完成，避免客户端 hydration 不匹配问题。

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