mdx-components.js
mdx-components.js|tsxファイルは、@next/mdx とApp Routerを使用するために必須であり、このファイルがないと動作しません。さらに、スタイルをカスタマイズするためにも使用できます。
MDXコンポーネントを定義するには、プロジェクトのルートにmdx-components.tsx（または.js）ファイルを使用します。例えば、pagesまたはappと同じレベル、あるいは該当する場合はsrcの内部に配置します。
mdx-components.tsx
TypeScript
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}mdx-components.js
export function useMDXComponents(components) {
return {
...components,
}
}エクスポート
useMDXComponents関数
ファイルは、デフォルトエクスポートまたはuseMDXComponentsという名前でエクスポートされた単一の関数を持つ必要があります。
mdx-components.tsx
TypeScript
import type { MDXComponents } from 'mdx/types'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
}
}mdx-components.js
export function useMDXComponents(components) {
return {
...components,
}
}パラメータ
components
MDXコンポーネントを定義する際、エクスポート関数は単一のパラメータcomponentsを受け取ります。このパラメータはMDXComponentsのインスタンスです。
- キーは上書きするHTML要素の名前です。
- 値は代わりにレンダリングするコンポーネントです。
補足: オーバーライドされていない他のすべてのコンポーネント（つまり、
...components）を必ず渡してください。
バージョン履歴
| バージョン | 変更内容 |
|---|---|
v13.1.2 | MDXコンポーネント追加 |