mdx-components.js

mdx-components.js|tsx 檔案是使用 @next/mdx 搭配 App Router 的必要檔案，沒有它將無法運作。此外，您也可以使用它來自訂樣式。

在專案的根目錄中使用 mdx-components.tsx（或 .js）檔案來定義 MDX 組件。例如，與 pages 或 app 位在同一層級，或者如果有的話，放在 src 裡面。

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

匯出

`useMDXComponents` 函式

該檔案必須匯出單一函式，可以是預設匯出或命名為 useMDXComponents。

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}