MDX ファイルのインポート

はじめに

MDX ファイルは JavaScript にコンパイルされ、次のようなエクスポートを持ちます。

default: メインのコンポーネント。
frontmatter: フロントマターのデータ。
remark/rehype プラグインによって生成されるその他のプロパティ。

そのため、MDX ファイルはページとして使えるほか、インポートしてコンポーネントとして使うこともできます。

コンポーネントとして使用する

コンポーネントとしてインポートすることもできます。

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 では、app ディレクトリ配下に新しいページを作成する際、page.tsx の代わりに page.mdx を使用できます。

---
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 ファイルのインポート

はじめにアンカーリンクをコピー

コンポーネントとして使用するアンカーリンクをコピー

ページとして使用するアンカーリンクをコピー

このページの内容

はじめに

コンポーネントとして使用する

ページとして使用する