Next.js 13.4中如何通过next-mdx-remote/rsc传递自定义MDX数据？

在next-mdx-remote/rsc版本中，官方移除了非RSC版本的scope属性，所以直接给<MDXRemote/>传scope参数会无效。下面是两种可行的解决方案：

方法一：使用compileMDX注入自定义数据（推荐） #

这是最接近非RSC版本serialize+scope的用法，通过compileMDX函数提前将自定义数据注入到MDX内容的执行上下文里：

import { compileMDX } from 'next-mdx-remote/rsc'
import fs from 'fs'
import matter from 'gray-matter'

// 封装读取并编译MDX的逻辑
async function getCompiledMdx(mdxPath) {
  const rawSource = fs.readFileSync(mdxPath, 'utf8')
  const { content: mdxContent, data: frontmatter } = matter(rawSource)
  
  const customData = { product: 'next' }

  // 编译时传入scope，合并frontmatter和自定义数据
  const { content: compiledContent } = await compileMDX({
    source: mdxContent,
    components: {}, // 替换成你的自定义组件集合
    scope: { ...frontmatter, ...customData },
  })

  return compiledContent
}

// 在RSC页面组件中使用
export default async function MdxPage() {
  const content = await getCompiledMdx('./content/your-post.mdx')
  return <div className="mdx-content">{content}</div>
}

编译完成后，你可以直接在MDX文件中访问{product}变量，无需额外处理。

方法二：通过组件上下文/Props传递数据 #

如果不想提前编译MDX，也可以通过React上下文或自定义组件的Props来传递数据：

1. 先创建一个数据上下文组件：

// components/MDXDataContext.jsx
'use client'
import { createContext, useContext } from 'react'

const MDXDataContext = createContext({})

export function MDXDataProvider({ data, children }) {
  return (
    <MDXDataContext.Provider value={data}>
      {children}
    </MDXDataContext.Provider>
  )
}

export function useMDXData() {
  return useContext(MDXDataContext)
}

2. 在页面中包裹并传递数据：

import { MDXRemote } from 'next-mdx-remote/rsc'
import fs from 'fs'
import matter from 'gray-matter'
import { MDXDataProvider, useMDXData } from '@/components/MDXDataContext'

// 自定义组件，用于在MDX中展示数据
function ProductInfo() {
  const { product } = useMDXData()
  return <span>当前产品：{product}</span>
}

export default async function MdxPage() {
  const rawSource = fs.readFileSync('./content/your-post.mdx', 'utf8')
  const { content: mdxContent, data: frontmatter } = matter(rawSource)
  const customData = { product: 'next' }

  const components = { ProductInfo }

  return (
    <MDXDataProvider data={{ ...frontmatter, ...customData }}>
      <MDXRemote source={mdxContent} components={components} />
    </MDXDataProvider>
  )
}

3. 在MDX文件中使用自定义组件：

这是产品信息：<ProductInfo />

关键说明 #

• next-mdx-remote/rsc的设计更贴合React Server Components的特性，不再支持运行时注入scope变量，必须通过预编译（compileMDX）或者组件体系传递数据。
• 如果你之前尝试合并自定义数据到source字符串中，这种方式容易引发语法问题，不推荐使用。

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