mdx-components.js
mdx-components.js|tsxファイルは、App Routerで@next/mdxを使用するために必須であり、これがないと機能しません。さらに、スタイルをカスタマイズするためにも使用できます。
プロジェクトのrootにmdx-components.tsx（または.js）ファイルを使用してMDXコンポーネントを定義してください。たとえば、pagesやappと同じ階層、またはsrc内に配置します。
- TypeScript
- JavaScript
mdx-components.tsx
import type { MDXComponents } from 'mdx/types'
// useMDXComponents関数: カスタムMDXコンポーネントを定義するための関数
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components, // 既存のコンポーネントを展開する
}
}
mdx-components.js
// useMDXComponents関数: カスタムMDXコンポーネントを定義するための関数
export function useMDXComponents(components) {
return {
...components, // 既存のコンポーネントを展開する
}
}
エクスポート
useMDXComponents 関数
このファイルは、デフォルトエクスポートまたはuseMDXComponentsという名前で、単一の関数をエクスポートする必要があります。
- TypeScript
- JavaScript
mdx-components.tsx
import type { MDXComponents } from 'mdx/types'
// useMDXComponents関数: カスタムMDXコンポーネントを定義するための関数
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components, // 既存のコンポーネントを展開する
}
}
mdx-components.js
// useMDXComponents関数: カスタムMDXコンポーネントを定義するための関数
export function useMDXComponents(components) {
return {
...components, // 既存のコンポーネントを展開する
}
}
パラメータ
components
MDXコンポーネントを定義するときに、エクスポート関数は1つのパラメータ、componentsを受け取ります。このパラメータはMDXComponentsのインスタンスです。
- キーは上書きするHTML要素の名前です
- 値は代わりにレンダリングするコンポーネントです
Good to know: 上書きしないすべてのコンポーネント（すなわち、
...components）を渡すことを忘れないでください。
バージョン履歴
| バージョン | 変更 |
|---|---|
v13.1.2 | MDXコンポーネントが追加されました |