mdx라는 매우 멋진것을 발견하였습니다!

juunini·2021년 10월 13일
4

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로 하여도 방법은 크게 다르지 않은 것으로 알고있습니다.

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

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

profile
Full StackOverFlow

4개의 댓글

comment-user-thumbnail
2021년 10월 14일

컨셉이 확실하여 mdx는 next에서만 사용가능다는걸 배웠사옵니다~

1개의 답글
comment-user-thumbnail
6일 전

예전에 찍먹해봤던 Vuepress 가 비슷한 느낌이었던 것 같네요. 신박하다고 생각했는데 ㅎㅎ

답글 달기