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