mdx-components.js

mdx-components.js|tsx ファイルは、App Router で @next/mdx を使用する場合に必須であり、これがないと動作しません。さらに、スタイルのカスタマイズにも使用できます。

MDX コンポーネントを定義するには、プロジェクトのルートに mdx-components.tsx（または .js）ファイルを作成します。例えば、pages や app と同じ階層、または該当する場合は src 内に配置します。

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

エクスポート

useMDXComponents 関数

このファイルは、デフォルトエクスポートまたは useMDXComponents という名前の単一の関数をエクスポートする必要があります。

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

パラメータ

components

MDX コンポーネントを定義する際、エクスポート関数は単一のパラメータ components を受け取ります。このパラメータは MDXComponents のインスタンスです。

• キーはオーバーライドする HTML 要素の名前です
• 値は代わりにレンダリングするコンポーネントです

豆知識: オーバーライドされていない他のコンポーネント（つまり ...components）も渡すことを忘れないでください。

バージョン履歴