im-na0
commented
5 months ago MDX
- MDX는 Markdown와 JSX를 결합한 형식. 그래서 Markdown 문서에 React 컴포넌트를 넣을 수 있음
- Next.js mdx 컴파일러로는 contentlayer, next-mdx-remote가 대표적인 듯 함.
- Next에서는 @next/mdx와 next-mdx-remote를 지원하고 있음.
Next.js MDX 변환 도구
@next/mdx
로컬 폴더 내의 mdx 파일을 pages/app 디렉터리 내에서 바로 사용할 수 있음.
- Next.js와 긴밀한 통합
- 설정이 간단함
- 기본적으로 Next.js의 페이지 시스템과 호환되어 자동 라우팅을 제공
고려사항
- 동적 콘텐츠 로딩을 지원X, 모든 MDX 파일은 빌드 시 처리됨
next-mdx-remote
@next/mdx와 차이점은 로컬에 있는 마크다운이 아니어도 사용이 가능함. 특히 마크다운 파일들을 서로 다른 로컬 폴더에 저장하거나, DB 혹은 CMS를 사용하는 경우에 유용하다고 함.
- 서버 사이드 렌더링(SSR) 지원: MDX 콘텐츠를 서버 사이드에서 처리해 초기 페이지 로드 시 SSR 가능
- 동적 MDX 컴포넌트: MDX에서 React 컴포넌트를 동적으로 불러와 사용할 수 있음.
contentlayer
contentlayer는 Next.js와 함께 사용할 수 있는 정적 콘텐츠 관리 도구로 Markdown 파일이나 다른 데이터 소스에서 콘텐츠를 가져와 Next.js 애플리케이션에 쉽게 통합할 수 있음.
- 빌드 시 콘텐츠 색인화: 모든 콘텐츠를 빌드 시 색인화해 빠른 접근과 검색 가능
- 강력한 타입 지원: TypeScript를 사용하여 콘텐츠에 대한 타입 안정성 제공
- 플러그인 및 확장성: 다양한 콘텐츠 소스를 처리하고 사용자 정의 변환을 위한 플러그인 시스템을 지원함
고려사항
- Next.js 14 버전 지원 X
- 지금은 유지보수가 잘 안되고 있는 듯함 (1년정도...)
- 강력한 타입안정성을 제공하지만 해당 타입을 사용하기위해서 contentlayer에 깊숙히 의존하게 되는 문제가 있다고 함.
Velite
Velite는 type-safe data layer를 구축하는 도구로, Markdown/MDX, YAML, JSON 또는 기타 파일을 Zod 스키마를 사용하여 앱의 데이터 레이어로 변환해주는 도구.
- contentlayer와 유사하게 빌드 시 콘텐츠 처리를 최적화함
- 하지만 커뮤니티가 적어서 레퍼가 많이 없음
MDX 컴포넌트와 스타일 관리
전역 MDX 컴포넌트 설정 가능
- Next.js에서 MDX를 사용하여 동적인 콘텐츠를 효율적으로 관리하고 커스텀 컴포넌트를 전역적으로 적용할 수 있음.
- MDX 파일 전체에서 공통적으로 사용할 수 있는 컴포넌트를 설정할 수 있음.
스타일 적용
- MDX 파일에서 사용하는 마크다운 요소에 직접 스타일을 적용할 수 있음
- 전역 컴포넌트 설정을 통해 일관된 스타일을 적용하거나, 페이지별로 개별 스타일 설정 가능
마크다운 커스텀 플러그인
- remark
- GitHub Flavored Markdown(GFM)을 지원하며, 표, 할 일 목록 체크박스, 취소선 등을 마크다운에 추가할 수 있음.
- rehype-autolink-headings
- 자동으로 제목에 링크를 추가하여, 사용자가 쉽게 해당 섹션을 공유할 수 있게 함.
- rehype-prism
- 코드 블록에 구문 강조를 적용하여, 개발자 문서나 튜토리얼에서 코드를 더 쉽게 읽을 수 있도록 함.
Reference
https://nextjs.org/docs/app/building-your-application/configuring/mdx#getting-started
https://mdxjs.com/