Velite + MDX로 블로그 만들기

Velite + MDX 블로그 구축기

블로그를 시작하며에서 소개한 것처럼, 이 블로그는 Velite와 MDX를 핵심 콘텐츠 엔진으로 사용합니다.

왜 Velite인가?

Velite는 콘텐츠를 타입 안전하게 다룰 수 있는 빌드 도구입니다. Contentlayer의 대안으로, Zod 기반 스키마 정의가 특징입니다.

const posts = defineCollection({
  name: "Post",
  pattern: "posts/**/*.mdx",
  schema: s.object({
    title: s.string().max(120),
    slug: s.slug("posts"),
    body: s.mdx(),
  }),
});

MDX의 장점

마크다운 안에서 React 컴포넌트를 사용할 수 있어, 일반 마크다운보다 표현력이 뛰어납니다.

빌드 파이프라인

Velite가 MDX 파일을 파싱하여 .velite/ 디렉토리에 JSON으로 변환
Next.js가 빌드 시 이 JSON을 임포트하여 정적 페이지 생성
RSC를 활용해 서버에서 렌더링

코드 하이라이팅

rehype-pretty-code와 Shiki를 사용합니다. typescript-tips에서 볼 수 있듯이, 코드 블록이 깔끔하게 렌더링됩니다.

앞으로의 개선

Zettelkasten 기반 글 연결 시스템
지식 그래프 시각화
검색 기능 강화
mise를 활용한 개발 환경 통일