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) を渡すことを忘れないでください。

バージョン履歴