mdx-components.js
mdx-components.js|tsxファイルは、App Routerで@next/mdxを使用するために必須であり、これなしには動作しません。さらに、これを使用してスタイルをカスタマイズすることもできます。
プロジェクトのルートにmdx-components.tsx（または.js）ファイルを配置して、MDXコンポーネントを定義します。例えば、pagesまたはappと同じレベルか、該当する場合はsrc内に配置します。
mdx-components.tsx
TypeScript
import type { MDXComponents } from 'mdx/types'
const components: MDXComponents = {}
export function useMDXComponents(): MDXComponents {
return components
}エクスポート
useMDXComponents関数
ファイルはuseMDXComponentsという名前の単一の関数をエクスポートする必要があります。この関数は引数を受け付けません。
mdx-components.tsx
TypeScript
import type { MDXComponents } from 'mdx/types'
const components: MDXComponents = {}
export function useMDXComponents(): MDXComponents {
return components
}バージョン履歴
| バージョン | 変更内容 |
|---|---|
v13.1.2 | MDXコンポーネント追加 |