mdx-components.js 文件
mdx-components 文件是必需的，您使用它通过
useMDXComponents 函数自定义样式。
示例
mdx-components.js 文件必须导出
一个名为 useMDXComponents 的单一函数。
mdx-components.js
import { useMDXComponents as getThemeComponents } from 'nextra-theme-docs' // nextra-theme-blog or your custom theme
// Get the default MDX components
const themeComponents = getThemeComponents()
// Merge components
export function useMDXComponents(components) {
return {
...themeComponents,
...components
}
}错误
模块未找到：无法解析 'next-mdx-import-source-file'
要修复此问题，请更新 next.config
文件中的 turbopack.resolveAlias 部分：
Note
- 如果您使用的是 Next.js < 15.3，请使用
experimental.turbopack.resolveAlias - 如果您使用的是 Next.js ≥ 15.3，请使用
turbopack.resolveAlias
next.config.mjs
import nextra from 'nextra'
const withNextra = nextra()
export default withNextra({
+ turbopack: {
+ resolveAlias: {
+ // Path to your `mdx-components` file with extension
+ 'next-mdx-import-source-file': './src/mdx-components.tsx'
+ }
+ }
})Tip
- 您可以将
mdx-components文件保存在项目根目录，或在src目录中。 mdx-components文件可以使用.js、.jsx或.tsx文件扩展名。- 导入
useMDXComponents时，将其别名为getMDXComponents，以避免 ESLint React Hooks 插件的误报错误。
react-hooks/rules-of-hooks
React Hook "useMDXComponents" cannot be called at the top level.
React Hooks must be called in a React function component or a custom React Hook function.Last updated on