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

왜 직접 만들었나

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

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

기술 스택

핵심: 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 구조다. 로케일과 카테고리 조합으로 파일 시스템 기반 라우팅을 구현했다. Next.js App Router의 동적 세그먼트와 1:1로 대응되니까 직관적이다.

디렉토리 구조

다국어 처리가 생각보다 까다로웠다

next-intl을 쓰면 라우팅 자체는 간단하다. /ko/dev/..., /en/dev/... 이렇게 URL에 로케일을 넣으면 된다.

문제는 콘텐츠다. 같은 글의 한국어 버전과 영어 버전이 별도 MDX 파일로 존재해야 하는데, 모든 글을 번역할 필요는 없다. 개발 글은 영어 번역 우선, 일본 여행 글은 일본어 번역 우선, 일상 에세이는 한국어 전용. 이 규칙을 파일 시스템 구조로 자연스럽게 표현할 수 있는 게 MDX 기반의 장점이다.

UI 텍스트 번역은 messages/ko.json, messages/en.json, messages/ja.json에 모아두고 useTranslations 훅으로 가져온다. 이건 크게 어렵지 않았다.

배포: Vercel + GitHub

배포는 놀라울 정도로 간단하다. GitHub 레포에 push하면 Vercel이 알아서 빌드하고 배포한다. 프리뷰 배포도 자동으로 만들어주니까 PR 단위로 확인할 수 있다.

SSG(정적 사이트 생성)로 빌드하니까 성능도 빠르다. 블로그 특성상 콘텐츠가 빌드 타임에 결정되니까 SSG가 딱 맞는다.

다음 단계

하나씩 진행하면서 다 기록할 예정이다.

다음 글: 내 API 키가 털렸다 — 이 블로그 만들면서 생긴 건 아니고, 다른 프로젝트에서 터진 사고인데... 꽤 충격적이었다.