mdx-components.js

Файл mdx-components.js|tsx обязателен для использования @next/mdx с App Router и не будет работать без него. Кроме того, его можно использовать для настройки стилей.

Создайте файл mdx-components.tsx (или .js) в корне вашего проекта для определения MDX-компонентов. Например, на том же уровне, что pages или app, или внутри src, если это применимо.

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

export function useMDXComponents(components) {
  return {
    ...components,
  }
}

Экспорты

Функция useMDXComponents

Файл должен экспортировать одну функцию, либо как экспорт по умолчанию, либо с именем useMDXComponents.

import type { MDXComponents } from 'mdx/types'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

export function useMDXComponents(components) {
  return {
    ...components,
  }
}

Параметры

components

При определении MDX-компонентов экспортируемая функция принимает один параметр — components. Этот параметр представляет собой экземпляр MDXComponents.

• Ключ — это имя HTML-элемента, который нужно переопределить.
• Значение — это компонент, который будет отображаться вместо него.

Полезно знать: Не забудьте передать все остальные компоненты (т.е. ...components), которые не имеют переопределений.

История версий