Velite로 MDX 콘텐츠 관리하기

글이 늘어나면 프런트매터 오타 하나가 페이지를 깨뜨린다. Velite는 빌드 시점에 스키마로 검증해 주니 그런 걱정이 줄었다.

스키마

velite.config.ts

schema: s.object({
  title: s.string().max(99),
  date: s.isodate(),
  tags: s.array(s.string()).default([]),
  summary: s.string(),
  draft: s.boolean().default(false),
  code: s.mdx(),
});

Notedraft: true인 글은 개발 서버에서만 보이고, 프로덕션 빌드에서는 빠진다.

쓰는 쪽

#site/content에서 posts를 가져온다.
날짜 내림차순으로 정렬한다.
태그는 글 목록에서 모아서 /tags/[tag] 페이지를 만든다.

글이 늘어나면 프런트매터 오타 하나가 페이지를 깨뜨린다. Velite는 빌드 시점에 스키마로 검증해 주니 그런 걱정이 줄었다.

스키마

velite.config.ts

schema: s.object({
  title: s.string().max(99),
  date: s.isodate(),
  tags: s.array(s.string()).default([]),
  summary: s.string(),
  draft: s.boolean().default(false),
  code: s.mdx(),
});

Notedraft: true인 글은 개발 서버에서만 보이고, 프로덕션 빌드에서는 빠진다.

쓰는 쪽

#site/content에서 posts를 가져온다.
날짜 내림차순으로 정렬한다.
태그는 글 목록에서 모아서 /tags/[tag] 페이지를 만든다.