mdx-components.js

The mdx-components.js|tsx file is required to use @next/mdx with App Router and will not work without it. Additionally, you can use it to customize styles.

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.

TypeScript

JavaScript

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

const components: MDXComponents = {}

export function useMDXComponents(): MDXComponents {
  return components
}

mdx-components.js

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.

TypeScript

JavaScript

mdx-components.tsx

import type { MDXComponents } from 'mdx/types'

const components: MDXComponents = {}

export function useMDXComponents(): MDXComponents {
  return components
}

mdx-components.js

const components = {}

export function useMDXComponents() {
  return components
}

Version History

Version	Changes
`v13.1.2`	MDX Components added

Exports

useMDXComponents function

Version History

`useMDXComponents` function