아벨 블로그 | MDX로 인터랙티브한 블로그 만들기

MDX는 Markdown과 JSX를 결합한 형식으로, 일반 Markdown처럼 글을 쓰면서도 React 컴포넌트를 직접 삽입할 수 있습니다. Next.js에서 MDX를 활용하면 정적인 블로그에 동적인 요소를 쉽게 추가할 수 있습니다.

MDX란?

MDX(Markdown + JSX)는 Markdown 파일 안에 JSX를 작성할 수 있게 해주는 포맷입니다. 이를 통해:

일반 Markdown의 간결한 문법을 그대로 사용
React 컴포넌트를 직접 삽입하여 인터랙티브한 콘텐츠 제작
코드 예제를 실제 작동하는 컴포넌트로 변환

MDX의 장점

1. Markdown의 간결함 유지

일반 Markdown 문법을 그대로 사용할 수 있습니다:

리스트도 가능하고
굵은 글씨와 이탤릭도 사용 가능
인라인 코드도 당연히 지원
링크와 이미지도 기본 문법으로 처리

2. React 컴포넌트 삽입

MDX의 진정한 힘은 React 컴포넌트를 직접 사용할 수 있다는 것입니다. 예를 들어, 다음과 같은 인터랙티브한 카운터를 만들 수 있습니다:

import React from "react";

export function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div
      style={{
        padding: "20px",
        border: "2px solid #3b82f6",
        borderRadius: "8px",
        margin: "20px 0",
      }}
    >
      <p style={{ fontSize: "18px", marginBottom: "10px" }}>카운터 예시</p>
      <button
        onClick={() => setCount(count + 1)}
        style={{
          padding: "10px 20px",
          background: "#3b82f6",
          color: "white",
          border: "none",
          borderRadius: "4px",
          cursor: "pointer",
        }}
      >
        클릭 횟수: {count}
      </button>
    </div>
  );
}

<Counter />;

위의 버튼은 실제로 작동하는 React 컴포넌트입니다!

Next.js에서 MDX 사용하기

Next.js에서 MDX를 사용하는 방법은 매우 간단합니다. 프로젝트에 @next/mdx를 설치하고 설정하면 바로 사용할 수 있습니다.

기본 구조

블로그 포스트는 다음과 같은 구조를 가집니다:

export const metadata = {
  title: "블로그 제목",
  excerpt: "블로그 요약",
  date: "2024-12-20",
  category: "Frontend",
  author: "작성자 이름",
  readTime: "5분",
};

# 블로그 제목

블로그 본문 내용...

파일 구조

src/
  content/
    blogs/
      mdx-blogs.mdx
  app/
    blogs/
      [id]/
        page.tsx

코드 블록 예시

MDX는 당연히 코드 하이라이팅도 지원합니다. 다양한 언어의 코드를 작성할 수 있습니다:

React 컴포넌트 예시

export default function MyComponent() {
  return (
    <div className="container">
      <h1>Hello, MDX!</h1>
      <p>Markdown과 JSX를 함께 사용할 수 있습니다.</p>
    </div>
  );
}

TypeScript 예시

type User = {
  id: string;
  name: string;
  email: string;
};

function greetUser(user: User): string {
  return `안녕하세요, ${user.name}님!`;
}

Next.js API 라우트 예시

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ message: "Hello, Next.js!" });
}

MDX 활용 사례

1. 인터랙티브한 튜토리얼

실제 작동하는 코드 예제를 보여주면서 독자가 직접 결과를 확인할 수 있습니다. 예를 들어, 폼 유효성 검사나 애니메이션 효과를 바로 체험할 수 있습니다.

2. 데이터 시각화

차트나 그래프를 포함한 포스트에서 실제 데이터를 시각화하여 보여줄 수 있습니다. Recharts나 D3.js 같은 라이브러리를 활용하면 더욱 강력합니다.

3. 커스텀 UI 컴포넌트

일반 Markdown으로는 표현하기 어려운 복잡한 레이아웃이나 특수한 UI 컴포넌트를 직접 삽입할 수 있습니다.

언제 MDX를 사용해야 할까?

✅ MDX가 적합한 경우:

인터랙티브한 튜토리얼: 실제 작동하는 예제를 보여주고 싶을 때
데이터 시각화: 차트나 그래프를 포함한 포스트
커스텀 UI 컴포넌트: 일반 Markdown으로는 표현하기 어려운 레이아웃
동적 콘텐츠: 사용자 입력에 따라 변하는 콘텐츠

❌ 일반 Markdown이 나은 경우:

단순한 텍스트 위주의 글: 굳이 MDX의 복잡성이 필요 없음
외부 편집기 호환성: VSCode나 다른 Markdown 편집기에서 바로 보고 싶을 때
빠른 작성: 간단한 글을 빠르게 작성하고 싶을 때

Next.js MDX 설정 팁

1. 메타데이터 관리

각 MDX 파일에서 metadata 객체를 export하여 블로그 목록과 상세 페이지에서 활용할 수 있습니다.

2. 컴포넌트 재사용

공통으로 사용하는 컴포넌트는 mdx-components.tsx에서 전역으로 설정하거나, 각 MDX 파일에서 직접 import하여 사용할 수 있습니다.

3. 스타일링

Tailwind CSS의 prose 클래스를 활용하면 Markdown 콘텐츠를 자동으로 아름답게 스타일링할 수 있습니다.

결론

MDX는 정적인 블로그에 동적인 요소를 추가할 수 있는 강력한 도구입니다. Next.js와 함께 사용하면 개발자 블로그나 기술 문서를 작성할 때 매우 유용합니다.

단, 모든 글에 MDX를 사용할 필요는 없고, 필요한 곳에만 선택적으로 사용하는 것이 좋습니다. 간단한 글은 일반 Markdown으로 작성하고, 인터랙티브한 요소가 필요한 경우에만 MDX를 활용하는 것이 효율적입니다.

참고: 이 블로그는 .md 파일과 .mdx 파일을 모두 지원합니다. 상황에 맞게 선택하여 사용하세요!