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,
}
}export function useMDXComponents(components) {
return {
...components,
}
}エクスポート
useMDXComponents 関数
このファイルは、デフォルトエクスポートまたは useMDXComponents という名前の単一の関数をエクスポートする必要があります。
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}export function useMDXComponents(components) {
return {
...components,
}
}パラメータ
components
MDX コンポーネントを定義する際、エクスポート関数は単一のパラメータ components を受け取ります。このパラメータは MDXComponents のインスタンスです。
- キーはオーバーライドする HTML 要素の名前です
- 値は代わりにレンダリングするコンポーネントです
豆知識: オーバーライドされていない他のコンポーネント（つまり
...components）も渡すことを忘れないでください。
バージョン履歴
| バージョン | 変更内容 |
|---|---|
v13.1.2 | MDX コンポーネントが追加されました |