mdxRs

이번 글에서는 Next.js에서 MDX 파일을 컴파일 할 때 사용하는 새로운 러스트(Rust) 기반 컴파일러인 mdxRs에 대해 이야기해볼게요.

MDX란, 마크다운(Markdown)과 JSX가 합쳐진 형태로, 리액트 컴포넌트를 마크다운 문서에 자연스럽게 섞어서 사용할 수 있게 해줘서 개발자들에게 아주 인기 있는 포맷이에요.

기존 @next/mdx 플러그인은 자바스크립트로 작성된 컴파일러를 사용했는데요, 이번에 실험적으로 러스트로 작성된 훨씬 빠른 컴파일러를 지원하는 게 바로 mdxRs입니다. 러스트 컴파일러 덕분에 속도가 빨라지고 메모리 사용량도 줄일 수 있어 성능 효율이 좋아졌다는 장점이 있어요.

다음은 mdxRs를 Next.js 프로젝트에 적용하는 기본 설정입니다:

const withMDX = require('@next/mdx')()

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'mdx'], // mdx 파일도 페이지로 인식하게 합니다.
  experimental: {
    mdxRs: true, // 러스트 기반 MDX 컴파일러 활성화
  },
}

module.exports = withMDX(nextConfig)

pageExtensions: 여기서 MDX 확장자를 추가해서 .mdx 파일을 라우트 페이지로 사용할 수 있게 해주고요.
experimental.mdxRs: 실험 기능인 러스트 MDX 컴파일러를 활성화합니다. (오늘 기준으로는 실험 단계라 API가 바뀔 가능성도 있으니 참고하세요!)

참고로, 더 알아두면 좋은 점들

mdxRs 기능은 Next.js의 실험적인 기능에 해당하기 때문에, 버전을 업그레이드 할 때 호환성 문제나 기능 변경이 있을 수 있어요.
Rust 기반 컴파일러라서 최적화가 잘 되어 있어 특히 대용량 MDX 파일이나 빌드 시간이 긴 프로젝트에서 효과를 더 느낄 수 있습니다.
이미 @next/mdx 플러그인에 익숙하다면, 특별한 변경 없이 옵션만 켜주면 되니까 도입도 쉽다는 장점이 있습니다.
만약 MDX 내부에 복잡한 커스텀 컴포넌트가 많거나, 특별한 Babel/ESLint 설정이 필요하면 withMDX 함수 인자로 옵션들을 함께 전달해 더 세밀한 설정이 가능합니다.

마지막으로 실험적으로 만나볼 수 있는 이 기능, 직접 적용해보고 빌드 속도나 번들 결과물 차이가 어떤지 체감해 보는 것도 개발자로서 재미있는 경험이 될 거예요!

더 많은 Next.js, MDX 관련 이야기는 앞으로도 공유할게요. 궁금한 점 있으면 댓글로 알려주세요 :)

Nextjs에서 mdxRs 사용하는 방법

mdxRs

참고로, 더 알아두면 좋은 점들