mdx-components.js

mdx-components.js|tsx 파일은 App Router와 함께 @next/mdx를 사용하기 위해 필수이며, 이 파일 없이는 동작하지 않습니다. 또한, 스타일을 커스터마이즈하는 데 사용할 수 있습니다.

프로젝트의 루트에 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,
  }
}

Exports

useMDXComponents function

파일은 기본 내보내기 또는 useMDXComponents라는 이름으로 단일 함수를 내보내야 합니다.

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

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

Params

components

MDX 컴포넌트를 정의할 때, 내보내는 함수는 components라는 단일 매개변수를 받습니다. 이 매개변수는 MDXComponents의 인스턴스입니다.

• 키는 덮어쓸 HTML 요소의 이름입니다.
• 값은 대신 렌더링할 컴포넌트입니다.

알아두면 좋은 점: 덮어쓰지 않는 모든 컴포넌트(즉, ...components)를 전달하는 것을 잊지 마십시오.

Version History