·2 min read·Development

Next.js 14와 MDX로 블로그 만들기

Next.js 14 App Router와 MDX를 활용하여 정적 블로그를 구축하는 과정을 정리합니다.

Next.jsMDXReact블로그

왜 Next.js + MDX인가

정적 블로그를 만들 수 있는 도구는 많지만, Next.js 14 App Router와 MDX 조합이 주는 이점은 분명합니다:

  1. React 컴포넌트를 마크다운 안에서 사용 가능
  2. 정적 생성(SSG)으로 빠른 로딩 속도
  3. App Router의 레이아웃 시스템 활용
  4. TypeScript 완벽 지원

프로젝트 구조

orbit42/
├── content/posts/     # MDX 파일
├── src/
│   ├── app/           # App Router 페이지
│   ├── components/    # React 컴포넌트
│   └── lib/           # 유틸리티
└── public/            # 정적 파일

MDX Frontmatter 활용

각 글의 메타데이터는 frontmatter로 관리합니다:

---
title: "글 제목"
date: "2024-12-15"
description: "글 설명"
tags: ["태그1", "태그2"]
category: "Development"
published: true
---

gray-matter 라이브러리로 파싱하고, reading-time으로 읽기 시간을 계산합니다.

코드 하이라이팅

rehype-pretty-code와 shiki를 사용하면 다양한 언어의 구문 강조를 지원합니다:

def fibonacci(n: int) -> list[int]:
    """피보나치 수열 생성"""
    fib = [0, 1]
    for i in range(2, n):
        fib.append(fib[i-1] + fib[i-2])
    return fib[:n]
 
print(fibonacci(10))

GFM 지원

GitHub Flavored Markdown도 완벽 지원합니다:

기능지원 여부
테이블✅
취소선✅
자동 링크✅
체크박스✅
  • 프로젝트 초기화
  • MDX 설정
  • 배포 자동화

마무리

다음 글에서는 다크모드 구현과 SEO 최적화에 대해 다루겠습니다.

공유: