mdx-components.js

El archivo mdx-components.js|tsx es requerido para usar @next/mdx con App Router y no funcionará sin él. Adicionalmente, puedes usarlo para personalizar estilos.

Utiliza el archivo mdx-components.tsx (o .js) en la raíz de tu proyecto para definir componentes MDX. Por ejemplo, al mismo nivel que pages o app, o dentro de src si aplica.

import type { MDXComponents } from 'mdx/types'

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

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

Exportaciones

Función useMDXComponents

El archivo debe exportar una única función, ya sea como exportación por defecto o nombrada como useMDXComponents.

import type { MDXComponents } from 'mdx/types'

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

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

Parámetros

components

Al definir componentes MDX, la función de exportación acepta un único parámetro, components. Este parámetro es una instancia de MDXComponents.

• La clave es el nombre del elemento HTML a sobrescribir.
• El valor es el componente a renderizar en su lugar.

Importante: Recuerda pasar todos los demás componentes (es decir, ...components) que no tengan sobrescrituras.

Historial de versiones