使用Next.js的next-mdx-remote仅显标题不显内容如何解决？

问题场景 #

在Next.js项目中使用next-mdx-remote/rsc的MDXRemote组件渲染本地MDX文件时，仅能显示frontmatter中的标题，正文内容完全不渲染。

核心原因 #

你在lib/mdx.js中错误导入了非RSC模式的serialize方法，而RSC（React Server Components）模式下的next-mdx-remote需要使用专门的序列化方法，两者返回的结构不兼容，导致MDXRemote无法正确解析内容。

修复步骤 #

1. 替换serialize的导入路径：将lib/mdx.js中从next-mdx-remote/serialize导入的serialize，改为从next-mdx-remote/rsc导入。
2. 调整序列化参数（可选）：RSC模式下serialize的scope参数不是必需的，若不需要将frontmatter作为MDX组件的props，可以移除该参数。

修改后的完整代码示例 #

lib/mdx.js #

import { serialize } from 'next-mdx-remote/rsc'; // 关键修改：导入RSC版本的serialize
import { promises as fs } from 'fs';
import matter from 'gray-matter';
import path from 'path';

const postsDirectory = path.join(process.cwd(), 'content/biography');

export async function getPostBySlug() {
  const filePath = path.join(postsDirectory, `life.mdx`);
  const mdxText = await fs.readFile(filePath, 'utf8');

  const { content, data } = matter(mdxText);

  // RSC模式下serialize无需scope参数（若需传递frontmatter给MDX组件可保留）
  const mdxSource = await serialize(content);
  console.log('Serialized MDX Source:', mdxSource);

  return {
    source: mdxSource,
    frontmatter: data,
  };
}

export async function getAllPostSlugs() {
  const filenames = await fs.readdir(postsDirectory);
  return filenames.map((filename) => filename.replace('.mdx', ''));
}

PostPage.tsx（无需修改，确认导入正确即可） #

import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote/rsc';
import { getPostBySlug } from '../../../lib/mdx';

export interface Props {
  source: MDXRemoteSerializeResult;
  frontmatter: {
    title: string;
    date: string;
  };
}

export default async function PostPage() {
  const { source, frontmatter } = await getPostBySlug();
  console.log('MDX Source:', source);
  console.log('Frontmatter:', frontmatter);

  return (
    <div className="pt-16">
      <h1>{frontmatter.title}</h1>
      <MDXRemote source={source} />
    </div>
  );
}

验证方式 #

修改代码后重启Next.js开发服务器，访问/about路由，即可看到MDX正文内容（如# Hello, world!和段落文本）被正确渲染。

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