mdx 홈페이지

누구인가? 누가 지금 이상한 확장자 소리를 내었는가?

시...신이옵니다. 폐하.
.mdx 라는 확장자인데, .jsx, .tsx 처럼 .mdx 이옵니다.

어떻게 쓰는것인가?

// HelloWorld.mdx
Hello, World!
_Hello, World!_
__Hello, World!__
<span style="color: red">Hello, World!</span>
  
// HelloPage.tsx
import HelloWorld from './HelloWorld.mdx';

export default function HelloPage(): JSX.Element {
  return (
    <HelloWorld />
  );
}

이렇게 하면 해당 페이지를 렌더링 했을 때

Hello, World!
Hello, World!
Hello, World!
Hello, World!

이렇게 나타날 것입니다.

그래! 바로 그것이야!

황송하옵니다.
신이 잠이 오지 않아 react-markdown 을 사용하려 검색하다가 우연히 발견하게 되었사옵니다.

그럼 어서 백성들이 알아들을 수 있도록 널리 알리고 오거라

아뢰옵기 황송하오나 Next.JS에서만 사용해서 그 방법을 기준으로 설명드리도록 하겠습니다.

yarn add @mdx-js/loader @mdx-js/react @next/mdx

// next.config.js
const withMDX = require('@next/mdx')({
  extension: /\.mdx$/,
});

module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
});

// mdx.d.ts
/// <reference types="@mdx-js/loader" />

declare module '*.mdx' {
  const MDXComponent: (props: any) => JSX.Element;
  export default MDXComponent;
}

// tsconfig.json
{
  "include": [
    "mdx.d.ts"
  ]
}

이리 하여 사용하였으나, react나 cra로 하여도 방법은 크게 다르지 않은 것으로 알고있습니다.

공식 홈페이지가 자세히 아뢰고 있으니

통촉하여주시옵소서! 폐하!(?)