mdx-components.js

Le fichier mdx-components.js|tsx est requis pour utiliser @next/mdx avec App Router et ne fonctionnera pas sans lui. De plus, vous pouvez l'utiliser pour personnaliser les styles.

Utilisez le fichier mdx-components.tsx (ou .js) à la racine de votre projet pour définir les composants MDX. Par exemple, au même niveau que pages ou app, ou dans src si applicable.

import type { MDXComponents } from 'mdx/types'

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

Exports

Fonction useMDXComponents

Le fichier doit exporter une seule fonction, soit comme export par défaut, soit nommée useMDXComponents.

import type { MDXComponents } from 'mdx/types'

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

Paramètres

components

Lors de la définition des composants MDX, la fonction d'export accepte un seul paramètre, components. Ce paramètre est une instance de MDXComponents.

• La clé est le nom de l'élément HTML à remplacer.
• La valeur est le composant à afficher à la place.

Bon à savoir : N'oubliez pas de transmettre tous les autres composants (c'est-à-dire ...components) qui n'ont pas de remplacement.

Historique des versions