mdx-components.js
mdx-components.js|tsx 파일은 App Router에서 @next/mdx를 사용하기 위해 필수이며, 이 파일 없이는 작동하지 않습니다. 또한, 사용자 정의 스타일 적용에도 사용할 수 있습니다.
MDX 컴포넌트를 정의하려면 프로젝트의 루트에 mdx-components.tsx (또는 .js) 파일을 사용하세요. 예를 들어, pages나 app과 같은 레벨, 또는 해당되는 경우 src 내부에 위치시킵니다.
mdx-components.tsx
import type { MDXComponents } from "mdx/types";
// MDX 컴포넌트를 사용하기 위한 함수
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
};
}mdx-components.js
// MDX 컴포넌트를 사용하기 위한 함수
export function useMDXComponents(components) {
return {
...components,
};
}내보내기
useMDXComponents 함수
이 파일은 단일 함수를 내보내야 하며, 기본 내보내기나 useMDXComponents라는 이름으로 내보내야 합니다.
mdx-components.tsx
import type { MDXComponents } from "mdx/types";
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
...components,
};
}mdx-components.js
export function useMDXComponents(components) {
return {
...components,
};
}매개변수
components
MDX 컴포넌트를 정의할 때, 내보내기 함수는 components라는 단일 매개변수를 받습니다. 이 매개변수는 MDXComponents의 인스턴스입니다.
- 키는 오버라이드할 HTML 요소의 이름입니다.
- 값은 대신 렌더링할 컴포넌트입니다.
참고: 오버라이드하지 않은 다른 모든 컴포넌트(즉,
...components)도 전달해야 합니다.
버전 기록
| 버전 | 변경 사항 |
|---|---|
v13.1.2 | MDX 컴포넌트 추가됨 |