mdx-components.js

mdx-components.js|tsx ファイルは、App Routerで@next/mdxを使用するために必須であり、これがなければ機能しません。さらに、カスタムスタイルのカスタマイズにも使用できます。

プロジェクトのルートに mdx-components.tsx（または .js）ファイルを配置して、MDX Componentsを定義します。例えば、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）を必ず渡してください。

バージョン履歴