作为页面使用

介绍

MDX 文件将被编译为 JS 脚本，并导出如下内容：

default：主要组件。
frontmatter：frontmatter 数据。
remark/rehype 插件生成的其他属性。

因此，它们也可以用作页面，或导入的组件。

Next.js

您可以使用 page.mdx 而非 page.tsx 来在 app 目录下创建新页面。

---
title: 我的页面
---

export { default } from '@/components/layouts/page';

# 你好世界

这是我的页面。

MDX 组件

默认情况下，它不包含 MDX 组件，您必须提供它们：

import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultMdxComponents, // for Fumadocs UI
    ...components,
  };
}

// export a `useMDXComponents()` that returns MDX components
export const useMDXComponents = getMDXComponents;

其他框架

某些框架如 Tanstack Start 需要显式声明 loader，建议在页面中使用它们作为组件。

app/my-page.tsx

import MyPage from '@/content/page.mdx';
import { getMDXComponents } from '@/mdx-components';

export default function Page() {
  return (
    <div className="prose">
      {/* pass MDX components and render it */}
      <MyPage components={getMDXComponents()} />
    </div>
  );
}

介绍

Next.js

MDX 组件

其他框架

On this page