mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Remco HaszingGitHubgraphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>JosephJoseph### What? Fix the signatures of `useMDXComponents`. ### Why? The `useMDXComponents` function is always called without any arguments. It’s also always supposed to be a named export, not a default export. It’s also called during render. Defining React components during render is an anti-pattern. All components that were previously defined inside of `useMDXComponents`, are now defined outside of the function. ### How? Manual fixes. --------- Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Co-authored-by: Joseph <[email protected]> Co-authored-by: Joseph <[email protected]>
61 lines
1.5 KiB
Plaintext
61 lines
1.5 KiB
Plaintext
---
|
|
title: mdx-components.js
|
|
description: API reference for the mdx-components.js file.
|
|
related:
|
|
title: Learn more about MDX Components
|
|
links:
|
|
- app/guides/mdx
|
|
---
|
|
|
|
The `mdx-components.js|tsx` file is **required** to use [`@next/mdx` with App Router](/docs/app/guides/mdx) and will not work without it. Additionally, you can use it to [customize styles](/docs/app/guides/mdx#using-custom-styles-and-components).
|
|
|
|
Use the file `mdx-components.tsx` (or `.js`) in the root of your project to define MDX Components. For example, at the same level as `pages` or `app`, or inside `src` if applicable.
|
|
|
|
```tsx filename="mdx-components.tsx" switcher
|
|
import type { MDXComponents } from 'mdx/types'
|
|
|
|
const components: MDXComponents = {}
|
|
|
|
export function useMDXComponents(): MDXComponents {
|
|
return components
|
|
}
|
|
```
|
|
|
|
```js filename="mdx-components.js" switcher
|
|
const components = {}
|
|
|
|
export function useMDXComponents() {
|
|
return components
|
|
}
|
|
```
|
|
|
|
## Exports
|
|
|
|
### `useMDXComponents` function
|
|
|
|
The file must export a single function named `useMDXComponents`. This function does not accept any arguments.
|
|
|
|
```tsx filename="mdx-components.tsx" switcher
|
|
import type { MDXComponents } from 'mdx/types'
|
|
|
|
const components: MDXComponents = {}
|
|
|
|
export function useMDXComponents(): MDXComponents {
|
|
return components
|
|
}
|
|
```
|
|
|
|
```js filename="mdx-components.js" switcher
|
|
const components = {}
|
|
|
|
export function useMDXComponents() {
|
|
return components
|
|
}
|
|
```
|
|
|
|
## Version History
|
|
|
|
| Version | Changes |
|
|
| --------- | -------------------- |
|
|
| `v13.1.2` | MDX Components added |
|