导入 MDX 文件

介绍

🌐 Introduction

MDX 文件将被编译为带有如下导出的 JavaScript：

🌐 MDX files will be compiled into JavaScript with exports like:

• default：主要成分。
• frontmatter：前置数据。
• 由 remark/rehype 插件生成的其他属性。

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

🌐 Hence, they can also be used as a page, or components that you can import.

作为组件使用

🌐 Using as Component

你可以将它们作为组件导入：

🌐 You can import them as a component:

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

export default function Page() {
  return (
    <div className="prose">
      
      <MyPage components={getMDXComponents()} />
    </div>
  );
}

作为页面使用

🌐 Using as Page

在 Next.js 中，你可以使用 page.mdx 来替代 page.tsx 在 app 目录下创建新页面。

🌐 On Next.js, you can use page.mdx instead of page.tsx for creating a new page under the app directory.

---
title: My Page
---

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

# Hello World

This is my page.

默认情况下它没有 MDX 组件，你需要自己提供它们：

🌐 It doesn't have MDX components by default, you have to provide them:

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;