Next.js + MDX로 3개 국어 블로그 만들기

왜 직접 만들었을까?

기존 블로그 플랫폼(Medium, Velog, 티스토리)을 다 써봤는데 항상 아쉬운 점이 있었어. 다국어 지원이 안 되거나, 코드 하이라이팅이 맘에 안 들거나, 디자인 커스터마이징이 제한적이거나.

그래서 내가 원하는 걸 다 넣을 수 있는 블로그를 직접 만들기로 했어.

기술 스택

• Framework: Next.js 14+ (App Router, SSG)
• Styling: Tailwind CSS + @tailwindcss/typography
• Content: MDX via next-mdx-remote + gray-matter
• i18n: next-intl (/ko, /ja, /en 라우팅)
• Deploy: Vercel (GitHub push → 자동 배포)
• Theme: next-themes (다크모드 지원)

핵심: MDX 파이프라인

MDX 파일을 읽어서 프론트매터를 파싱하고, 글 목록을 만드는 유틸리티를 작성했어.

// src/lib/mdx.ts — 글 하나 읽기
export function getPostBySlug(locale: Locale, category: Category, slug: string) {
  const filePath = path.join(contentDir, locale, category, `${slug}.mdx`);
  const fileContent = fs.readFileSync(filePath, "utf-8");
  const { data, content } = matter(fileContent);
  return { ...data, content, readingTime: readingTime(content) };
}

포인트는 content/[locale]/[category]/[slug].mdx 구조야. 로케일과 카테고리 조합으로 파일 시스템 기반 라우팅을 구현한 거지.

다음 단계

• giscus 댓글 시스템 연동
• RSS 피드 자동 생성
• Vercel Analytics 붙이기
• OG Image 자동 생성

하나씩 진행하면서 다 기록할 예정이야. 기대해줘!