NextJS渲染MDX时Frontmatter内容意外输出至HTML的问题

快速解决方案：禁用mdxRs #

你的问题核心在于启用了实验性的mdxRs（Rust版MDX编译器），它不兼容JavaScript编写的remark-frontmatter和remark-mdx-frontmatter插件，导致Frontmatter未被正确处理，反而被渲染成HTML内容。

修改next.config.mjs，将mdxRs设为false，切换回JavaScript版MDX编译器，原有插件即可正常工作：

import nextMdx from '@next/mdx'
import remarkFrontmatter from 'remark-frontmatter';
import remarkMdxFrontmatter from 'remark-mdx-frontmatter';

const withMdx = nextMdx({
  extension: /\.mdx?$/,
  options: {
    jsx: true,
    remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
    rehypePlugins: []
  },
})

export default withMdx({
  reactStrictMode: true,
  compiler: {
    styledComponents: true
  },
  experimental: {
    appDir: true,
    mdxRs: false, // 禁用Rust版MDX编译器
  },
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx']
})

修改后，Frontmatter会被正确提取，不会输出到HTML中，你依然可以通过Markdown.title访问Frontmatter字段。

进阶方案：保留mdxRs并手动解析Frontmatter #

如果想继续使用性能更好的Rust版MDX编译器，可通过gray-matter手动解析Frontmatter：

1. 安装依赖：

npm install gray-matter
# 或
yarn add gray-matter

2. 修改page.tsx（App Router环境下需使用服务器组件）：

import Head from 'next/head'
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { MDXRemote } from 'next-mdx-remote/rsc'

export default async function Page() {
  // 替换为你的MDX文件实际路径
  const filePath = path.join(process.cwd(), './markdown.mdx')
  const fileContent = fs.readFileSync(filePath, 'utf8')
  
  // 解析Frontmatter和正文内容
  const { data, content } = matter(fileContent)

  return <>
    <Head>
      <title>{data.title}</title>
    </Head>
    <MDXRemote source={content} />
  </>
}

此方式下，无需在next.config.mjs中配置remark插件，Frontmatter会被手动提取，正文内容由MDXRemote渲染。

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