NextJS
MDX 파일 작성기
MDX는 마크다운 파일에서 JSX 파일을 직접 사용할 수 있는 장점이 있습니다.
Next는 로컬에 있는 MDX 컨텐츠와 서버에서 동적으로 가져오는 원격 MDX 파일을 모두 지원합니다.
로컬 MDX 파일 구성
@next/mdx 패키지를 사용하면 Next는 /pages나 /app에 있는 MDX 파일과 거기서 사용된 리액트 컴포넌트를 HTML로 변환하여 페이지로
구성해줍니다.
자세한 내용은 아래 공식 문서에 있습니다.
동적으로 fetch하기
하지만 저는 /pages 폴더에 MDX 파일을 두고 싶지 않아 상위에 MDX만 모아둔 post 폴더를 만들고 파일을 동적으로 가져오도록 하였습니다.
동적으로 MDX 파일을 가져오기 위해선 next-mdx-remote 패키지를 사용합니다.
현재 url과 같이 /blog/[fileName]페이지를 빌드하기 위해 서버는 post 폴더에서 해당 file을 읽습니다. 읽은 파일은
next-mdx-remote/serialize의 serialize()로 컴파일 한 뒤, <MDXRemote />의 props로 넘겨 렌더되도록 합니다.
자세한 코드는 깃헙에 있습니다!
<MDXRemote />에 데이터 보내기
블로그 글별로 NextJS, 이슈, react-native 등 태그를 가지고 있습니다. 이를 상수로 관리하고 접근하기 위해
<MDXRemote /> 의 scope prop을 사용하였습니다. scope={{data: 1}}과 같이 보내면 MDX 파일에서 {data}와 같이
접근할 수 있습니다!