MDX로 Markdown에 컴포넌트 삽입하기 — 코드블럭, 이미지도 자유롭게!

Markdown 기반 블로그를 만들다 보면, 문서 안에 React 컴포넌트를 넣고 싶은 순간이 오죠.
예를 들어, 설명 중간에 <CustomAlert />나 <CodeBlock /> 같은 컴포넌트를 삽입하고 싶을 때 말이에요.

이럴 때 MDX를 사용하면 Markdown과 React의 조합으로 무한한 확장성을 가진 블로그를 만들 수 있습니다.

---

💡 MDX란?

MDX는 Markdown + JSX의 합성어로, Markdown 문서 안에서 React 컴포넌트를 바로 사용할 수 있게 해주는 포맷입니다.

• 기존 Markdown 문법 그대로 사용 가능
• 필요한 위치에 컴포넌트만 삽입 가능
• 예: .mdx 파일에서 <MyComponent /> 사용

즉, 블로그의 글 안에 **동적인 인터랙션**도 추가할 수 있어요!

---

📦 1. MDX 관련 패키지 설치

npm install @next/mdx @mdx-js/loader @mdx-js/react

그리고 next.config.js를 수정합니다:

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
});
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
});

이렇게 하면 .mdx 파일도 페이지나 포스트로 인식할 수 있어요.

---

📝 2. MDX 파일 작성하기

예시로 posts/mdx-intro.mdx 파일을 만들어보겠습니다.

---
title: "MDX로 컴포넌트 넣기"
date: "2025-06-10"
---

# MDX란 무엇인가요?

기존 Markdown처럼 작성하면서...

<CustomAlert message="🚨 중요 내용이에요!" />

그 사이에 이런 컴포넌트를 넣을 수 있어요.

이제 CustomAlert이라는 컴포넌트를 렌더링하기 위한 준비가 필요하죠.

---

🧩 3. 컴포넌트 바인딩 (MDXProvider)

pages/_app.tsx 또는 layout 파일에서 MDXProvider를 사용해 컴포넌트를 등록합니다.

// pages/_app.tsx
import { MDXProvider } from '@mdx-js/react';
import CustomAlert from '../components/CustomAlert';

const components = {
  CustomAlert,
};

function MyApp({ Component, pageProps }: any) {
  return (
    <MDXProvider components={components}>
      <Component {...pageProps} />
    </MDXProvider>
  );
}
export default MyApp;

이제 MDX 파일 안에서 <CustomAlert /> 사용 가능!

---

🌈 4. 코드블럭, 이미지, UI까지 자유롭게

MDX에서는 컴포넌트를 다양하게 활용할 수 있어요:

• <CodeBlock>: 문법 강조된 코드 출력
• <Image src="..." />: 최적화된 이미지 삽입
• <InteractiveQuiz />: 인터랙션 요소 삽입

글을 “읽는 것”에서 “체험하는 것”으로 바꿔줍니다.

---

✅ 마무리하며

MDX를 도입하면 블로그의 표현력은 상상 이상으로 확장됩니다.
복잡한 튜토리얼, 라이브 컴포넌트, 데모 삽입도 이제 가능하죠.

다음 글에서는 스타일링과 레이아웃 정리를 통해 블로그를 더 감각적으로 만들어볼게요.

“글은 코드처럼, 코드도 글처럼.”