mdx-components.js

Die Datei mdx-components.js|tsx ist erforderlich, um @next/mdx mit App Router zu verwenden und funktioniert nicht ohne sie. Zusätzlich können Sie sie verwenden, um Stile anzupassen.

Verwenden Sie die Datei mdx-components.tsx (oder .js) im Stammverzeichnis Ihres Projekts, um MDX-Komponenten zu definieren. Zum Beispiel auf der gleichen Ebene wie pages oder app oder innerhalb von src, falls zutreffend.

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

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

Exporte

useMDXComponents-Funktion

Die Datei muss eine einzelne Funktion exportieren, entweder als Standardexport oder mit dem Namen useMDXComponents.

import type { MDXComponents } from 'mdx/types'
 
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...components,
  }
}

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

Parameter

components

Bei der Definition von MDX-Komponenten akzeptiert die Exportfunktion einen einzelnen Parameter components. Dieser Parameter ist eine Instanz von MDXComponents.

• Der Schlüssel ist der Name des zu überschreibenden HTML-Elements.
• Der Wert ist die Komponente, die stattdessen gerendert werden soll.

Hinweis: Denken Sie daran, alle anderen Komponenten zu übergeben (d.h. ...components), die keine Überschreibungen haben.

Versionsverlauf