mdx-components.js

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

プロジェクトのルートにある mdx-components.tsx (または .js) ファイルを使用して、MDXコンポーネントを定義します。たとえば、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) を渡すことを忘れないでください。

バージョン履歴 （展開アイコン）