匯入 MDX 檔案

簡介

MDX 檔案會編譯成 JavaScript，並包含以下匯出：

default：主要元件。
frontmatter：frontmatter 資料。
由 remark/rehype 外掛產生的其他屬性。

因此，您可以將它們當作頁面使用，也可以當作元件匯入。

作為元件使用

您可以將它們作為元件匯入：

app/my-page.tsx

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

export default function Page() {
  return (
    <div className="prose">
      {/* 傳入 MDX 元件並算繪 */}
      <MyPage components={getMDXComponents()} />
    </div>
  );
}

作為頁面使用

在 Next.js 中，您可以使用 page.mdx 取代 page.tsx，在 app 目錄下建立新頁面。

---
title: My Page
---

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

# Hello World

This is my page.

它預設不包含 MDX 元件，您需要自行提供：

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

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

// 匯出會回傳 MDX 元件的 `useMDXComponents()`
export const useMDXComponents = getMDXComponents;

其他框架？

若使用 React Router、TanStack Start 或 Waku，請改為在頁面中將 MDX 檔案當作元件匯入。

匯入 MDX 檔案

簡介複製錨點連結

作為元件使用複製錨點連結

作為頁面使用複製錨點連結

本頁目錄

簡介

作為元件使用

作為頁面使用